vue-cli 项目结构解读(一)
当小白被webpack搞得一脸懵逼生无可恋的时候，vue-cli给我们带来了黎明的曙光。然而，入了这个坑就发现，webpakc的基础知识还是要掌握的，否则要增删减改些代码都心惊胆战，不知道改了又会出现一些什么不可预测的错误。所以，我决定认真地剖析一下这个坑。
前端发展太快，每个版本都有增删减改的地方。曾经太年轻，想着版本号越高越好，结果惨遇无数bug。所以在此先留下此次项目的运行环境，如果以后有不一样的地方，请把锅推给版本。
node:6.6.0 //目前来讲，6.X的版本是比较稳定的
vue-cli:2.8.0
router：yes
ESlint：no
Karma+Mocha：no
项目根目录
|-- build // 项目构建webpack相关代码
|-- config // 项目开发环境配置
|-- node-moudles //node依赖包（自动生成的）
|-- src // 源码目录
|-- router //路由文件
|-- static // 静态文件，比如一些图片，json数据等（打包成生产环境时，会将这个文件直接打包进去）
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico // 页面标签显示的logo
|-- index.html // 入口页面
|-- package.json // 项目基本信息
package.json
根目录下最需要了解的文件大概就是package.json了。package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式。
-
name
顾名思义就是一个项目的名称，会在创建vue-cli的时候自动产生成。格式不规范的时候，会智能提示你重新输入，比如首字母不能大写。 -
scripts
scripts可以把npm的一些命令封装起来，以达到开发时的高效率。当你的控制命令行长的跟裹脚布似得，这种感受就会越发得强烈了。除了封装命令，还可以编写表达式等，但是并不常用。
"scripts": {
"dev": "node build/dev-server.js", //运行开发环境
"build": "node build/build.js" //打包项目
}
当你在控制台上运行npm run dev时就是运行node build/dev-server.js
-
devDependencies、dependencies
这是两种依赖，devDependencies是开发环境所需要的依赖，而后者是正常工作时需要的依赖。
当运行npm install时，所安装的东西就是这里边的依赖。
index.html
这是整个项目的入口文件，但是一般只定义一个空的根节点，在main.js里面定义的实例将挂载在这个节点之下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>node</title>
</head>
<body>
<div id="app"></div> <!-- 构建的项目都会填充在这里 -->
</body>
</html>
虽然初衷是想把webpack相关的内容写一写就好的，但是想了想学习vue有一两月之久都没有好好整理一下思路，确是不该，所以就想细细地把相关内容写出来。
与webpack相关的配置会在下一小节po出来的。
