vue-cli#2.0项目结构

项目结构

.|-- 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                        // 程序入口文件，加载各种公共组件|-- static                           // 静态文件，比如一些图片，json数据等|   |-- data                           // 群聊分析得到的数据用于数据可视化|-- .babelrc                         // ES6语法编译配置|-- .editorconfig                    // 定义代码格式|-- .gitignore                       // git上传需要忽略的文件格式|-- README.md                        // 项目说明|-- favicon.ico |-- index.html                       // 入口页面|-- package.json                     // 项目基本信息

package.json
package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。

scripts字段
package.json文件里有一个scripts字段。

"scripts": {    "dev": "node build/dev-server.js",    "build": "node build/build.js"  }

在开发环境下，在命令行中运行npm run dev就相当于在执行node build/dev-server.js。所以script字段是用来指定npm相关命令的缩写的。

dependencies字段和devDependencies字段
dependencies字段指定了项目运行时所依赖的模块，devDependencies字段指定了项目开发时所依赖的模块。在命令行中运行npm install命令，会自动安装dependencies和devDependencies字段中的模块。
package.json还有很多配置相关项，想进一步了解package.json的可参考：https://docs.npmjs.com/files/package.json
webpack配置相关
上面说到在命令行中npm run dev就相当于在执行node build/dev-server.js，想必dev-server.js这个文件是十分重要的，它是在开发环境下构建时第一个要运行的文件。掘金上已经有一篇对vue-cli#2.0 webpack配置的分析文章，里面详细讲解了webpack相关配置文件的每行代码的意思，我只做一些补充。链接在此（一定要自习阅读，收获会很大）：https://gold.xitu.io/post/584e48b2ac502e006c74a120。
dev-server.js
…
…
// http-proxy可以实现转发所有请求代理到后端真实API地址，以实现前后端开发完全分离
// 在config/index.js中可以对proxyTable想进行配置
var proxyMiddleware = require(‘http-proxy-middleware’)

......// 热加载要使用webpack-dev-middleware在没有webpack-dev-server的时候进行热加载var hotMiddleware = require('webpack-hot-middleware')(compiler)// 当html-webpack-plugin模板改变是强制进行页面重新加载compiler.plugin('compilation', function (compilation) {  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {    hotMiddleware.publish({ action: 'reload' })    cb()  })})

webpack.base.conf.js

......module.export = {    // 编译入口文件    entry: {},    // 编译输出路径    output: {},    // 一些解决方案配置    resolve: {},    resolveLoader: {},    module: {        // 各种不同类型文件加载器配置        loaders: {        ...        ...        // js文件用babel转码        {            test: /\.js$/,            loader: 'babel',            include: projectRoot,            // 哪些文件不需要转码            exclude: /node_modules/        },        ...        ...        }    },    // vue文件一些相关配置    vue: {}} 

check-version.js

这个文件主要是用来检测当前环境中的node和npm版本和我们需要的是否一致的。// 加载语义化版本测试库var semver = require('semver')// 定制控制台日志的输入样式var chalk = require('chalk')// 引入package.json文件var packageConfig = require('../package.json')var exec = function (cmd) {  return require('child_process')    .execSync(cmd).toString().trim()}// 定义node和npm版本需求所组成的数组var versionRequirements = [  {    name: 'node',    currentVersion: semver.clean(process.version),    versionRequirement: packageConfig.engines.node  },  {    name: 'npm',    currentVersion: exec('npm --version'),    versionRequirement: packageConfig.engines.npm  }]module.exports = function () {  var warnings = []  // 依次判断版本是否符合要求  for (var i = 0; i < versionRequirements.length; i++) {    var mod = versionRequirements[i]    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {      warnings.push(mod.name + ': ' +        chalk.red(mod.currentVersion) + ' should be ' +        chalk.green(mod.versionRequirement)      )    }  }  ...}

想把webpack完全搞懂还是需要费很大功夫的，我感觉自己也只是入了一个门而已，要想深入了解webpack还是要去官网看说明文档。

http://webpack.github.io/docs/
https://webpack.js.org/configuration/
.babelrc
Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码。这里有一篇阮一峰老师写的相关文章供参考：Babel 入门教程

// 设定转码规则  "presets": ["es2015", "stage-2"],  // 转码的一些插件  "plugins": ["transform-runtime"],  "comments": false 

.editorconfig
该文件定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要。

root = true[*]    // 对所有文件应用下面的规则charset = utf-8                    // 编码规则用utf-8indent_style = space               // 缩进用空格indent_size = 2                    // 缩进数量为2个空格end_of_line = lf                   // 换行符格式insert_final_newline = true        // 是否在文件的最后插入一个空行trim_trailing_whitespace = true    // 是否删除行尾的空格

了解更多请参考官方配置文档http://editorconfig.org/
原文链接：
https://segmentfault.com/a/1190000007880723