Vue2实践揭秘读书笔记(2)——webpack模板以及构建工具

Vue作为AngularJS和React的继承者和改良者，它不单单从编码的特色与开发框架本身的使用上进行大面积的改良与优化。它提供了整套简化开发、测试与部署的方案。

安装vue-cli
vue-cli是一个npm的安装包，我们希望它能在本机的任意目录下创建项目，那么就得将它安装到node.js的全局运行目录下：
npm i vue-cli -g

初始化项目：

命令
init           		从制定模板中生成一个新的项目
list            	列出所有的可用的官方模板
help[cmd]		显示所有[cmd](命令)的帮助
选项
-h, --help  		输出用法信息
-v, --version		输出版本号

用list指令来查看官方模板
vue list

1. browserify——拥有高级功能的Browserify+vueify用于正式开发
2. browserify-simple——拥有基础功能的Browserify+vueify用于快速原型开发
3. simple——适用于单页应用开发的最小化配置
4. webpack——拥有高级功能的webpack+vue-loader用于正式开发
5. webpack-simple——拥有基础功能的webpack+vue-loader用于快速原型开发

创建项目
vue init webpack my-project

webpack-simple模板和webpack模板
webpack-simple目录结构

——README.md
——index.html
——package.json
——src
	——App.vue
	——assets
		——logo.png
	——main.js
——webpack.config.js

webpack-simple只配置了Babel和Vue的编译器，其他的一无所有。这个模板值得一提的就是src目录，所有的Vue代码源程序都放置在这个目录中。
一些约定：

1. 公共组件、指令、过滤器（多于三个文件以上的引用）将分别存放于src目录下的
   components;
   directives;
   filters。
2. 以使用场景命名Vue的页面文件。
3. 当页面文件具有私有组件、指令和过滤器时，则建立一个与页面同名的目录，页面文件更名为index.vue，将页面与相关的依赖文件放在一起。
4. 目录由全小写的名词、动名词或分词命名，有两个以上的词组成，以“-”进行分隔。
5. Vue文件统一以大驼峰命名法命名，仅入口文件index.vue采用小写
6. 测试文件一律以测试目标文件名.spec.js命名
7. 资源文件一律以小写字符命名，由两个以上的词组成，以“-”进行分割。

webpack模板目录

1. build——存放用于编译用的webpack配置与相关的辅助工具代码。
2. config——存放三大环境配置文件，用于设定环境变量和必要的路径信息。
3. test——存放E2E测试与单元测试文件以及相关的配置文件。
4. static——存放项目所需要的其他静态资源文件。
5. dist——存放运行npm run build指令后的生产环境输出文件，可直接部署到服务器对应的静态资源文件夹内，该文件夹只有在运行build之后才会生成。

这些目录的存在是依赖于模板内配置的开发工具的。

构建工具

由于开发、测试与生产三大运行环境都需要进行构建，而且针对不同的环境要求，它的配置会有一定的区别。

1. 编译开发环境

   在开发环境下通过以下指令加载运行Vue项目：
   npm run dev

   这个指令的配置是在package.json的script属性中设置的，实质上它是由npm来引导执行入口程序dev-server.js完成以下的加载过程：

   加载环境变量->合并webpack配置->配置热加载->配置代理服务器->配置回退支持->配置静态资源->加载开发服务器

   加载环境变量
   该环节从config目录加载index.js和dev.env.js两个模块，准备开发调试环境所必需的一些目录和全局变量。