vue-cli--项目目录及文件解析

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

重要文件解读

一.package.json: 定义该项目开发所需要的各种模块以及一些项目配置信息

1.安装依赖

dependencies字段指项目运行时所依赖的模块；//安装运行时依赖包 npm install 模块名 --save
devDependencies字段指定了项目开发时所依赖的模块；//安装开发时依赖包 npm install 模块名 --save-dev

2.script字段用来指定npm相关命令的缩写

二.webpack.base.confg.js ,   webpack的基础配置文件

功能：

把文件打包成浏览器可以认识的文件

四个重要组成部分：

入口：哪个作为入口文件，打包哪些文件

出口：打包出什么样的文件name=app

loader：对打包的文件做怎样的处理，比如吧es6转为es5

插件：比如对代码的优化，压缩，加密等

三.webpack.dev.conf.js ，webpack开发环境配置 

四.定义编辑器的编码格式

五.config/index.js，项目变量配置