去除vue脚手架的严格代码模式以及vue脚手架项目结构介绍

最新推荐文章于 2025-07-21 15:58:56 发布

原创

最新推荐文章于 2025-07-21 15:58:56 发布 · 888 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了vue-cli的项目目录结构，并详细说明如何去除严格模式，包括注释掉.eslintrc.js中的 '@vue/standard' 规则，以及通过调整rules中的'space-before-function-paren'设置。此外，还提供了如何修改VSCode设置，以避免.vue文件格式化后与脚手架编译规则冲突的方法，如创建.prettierrc文件来定制格式化规则。

vue-cli项目目录结构介绍

.
├── 'node_modules'     // npm下载包都在这个文件夹
├── 'public'  //我们主要是用来存放json数据，静态资源等              
│   ├── 'favicon.ico'
│   └── 'index.html'  // 作为入口模板,最后打包文件所在地，也是main,js 绑定的 dom
├── 'src'             // 整个工程文件目录 （入口文件）
│   ├── 'api'         // 创建用来管理接口的文件夹 
│   │   └── 'index.js'    // axios 入口使用
│   ├── 'assets'      // 静态资源管理负责管理图片文字一类的
│   │   ├── 'font'    // 存放字体库文件夹
│   │   └── 'img'     // 存放图片的文件夹
│   ├── 'components'  // 存放组件文件夹
│   │   └── 'HelloWorld.vue'     // 这是一个名叫HelloWorld.vue组件
│   ├── 'config'      // 项目配置的文件夹
│   │   └──  'index.js'          // 利用node 找包特性 起名index.js 可以快速导包

│   ├── 'router'      // 路由相关
│   │   ├── 'index.js'            // 利用node 找包特性 起名index.js
│   │   └── 'router.js'           // 路由配置
│   ├── 'store'        // Vuex状态管理文件夹

│   ├── 'views'        // 视图组件 和 公共组件
│   │   ├── 'About.vue'
│   │   └── 'Home.vue'
│   ├── App.vue     // 由于render 特性 所以需要一个被渲染的vue文件
│   ├── main.js     // 项目入口，