解读Vue-cli项目结构

在命令行使用tree命令查看目录结构

tree -L 2

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                       // postcss配置文件
|-- README.md                        // 项目启动安装的提示
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

readme.md

项目启动安装的提示

• npm install安装项目所需要的依赖
• npm run serve启动项目
• npm run build 项目打包命令，生成静态文件，可以被浏览器读取

package.json

npm install 命令所依赖的文件

• scripts ：项目的启动和打包的方式，启动方式可以使用：npm start 、npm run serve 、 npm run dev
• dependencies : 项目依赖
• devDependencies : 开发环境的依赖

babel.config.js

vue项目中使用了比较新的es6语法，使用babel进行转换

.gitignore

忽略某些文件，某些文件占用空间大，用git忽略调一些没有必要的文件，比如：node_modules

public

图标和主入口文件（index.html）

• index.html:包括主容器、全局css、全局cdn等

node_modules

项目所有的依赖，根据package.json文件生成，详情可查看nodejs文档

src

整个开发过程常用的文件夹

• assets : 静态文件、图片等
• components ： 组件文件夹，存放.vue文件，.vue文件包括template（相当于html结构）、script（js逻辑部分）、style（样式）

App.vue

根组件，顶级组件，调用其他的子组件

main.js

逻辑入口文件，当前项目的入口文件index.html先执行，之后自动执行main.js，没有显示引用main.js，但是脚手架自动处理执行

• main.js ： import App 组件， 使用new Vue实例出对象，渲染到App根组件，挂载到index.html的app容器