Vue全家桶实践（一）---vue-cli

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。

相关博客：

1. Vue全家桶实践（一）—vue-cli
2. Vue全家桶实践（二）—iView
3. Vue全家桶实践（三）—axios
4. Vue全家桶实践（四）—vue-router
5. Vue全家桶实践（五）—渲染函数&JSX
6. Vue全家桶实践（六）—自定义指令（directive）

Vue-cli

参考资料：

1. vue-cli文档

要开发Vue的SPA，就离不开Vue-cli这个友好的脚手架，它帮我们封装了webpack的复杂的配置，替我们省了很多事。
但实际上我们在开发的过程中，不可避免的需要修改这些配置，要想顺利高效的开发，对它的了解是必不可少的。接下来简单的梳理下vue-cli

快速开始：

// 全局安装脚手架
$ npm install -g vue-cli
// 初始化vue项目
$ vue init webpack my-project
// 进入项目目录
$ cd my-project
// 安装依赖
$ npm install
// 启动开发服务器
$ npm run dev

项目结构：

.
├── build/                      # webpack 配置文件
│   └── ...
├── config/
│   ├── index.js                # 主项目配置文件
│   └── ...
├── src/                          # 源代码
│   ├── main.js                 # app入口文件
│   ├── App.vue                 # 主app组件
│   ├── components/             # 通用组件
│   │   └── ...
│   └── assets/                 # 模块资源 (会被webpack处理)
│       └── ...
├── static/                     # 纯静态资源 (直接复制的静态资源)
├── test/                         # 测试相关
│       └── ...                
├── .babelrc                    # babel 配置，ES6/7语法转换
├── .editorconfig               # 文件换行，空格，tab和类似的设置，方便编辑器读取
├── .eslintrc.js                # eslint 配置，严格的代码规范。
├── .eslintignore               # eslint ignore 配置规则，哪些文件不需要通过eslint校验
├── .gitignore                  # git提交时忽略哪些文件
├── .postcssrc.js               # postcss 配置，他也是一种css预处理器
├── index.html                  # index.html 入口html
├── package.json                # 项目信息以及依赖
└── README.md                   # Default README file

执行脚本：

// 启动一个node.js本地开发服务器，开发时使用。
npm run dev

• 通过webpack和vue-loader编译处理vue单文件组件
• 保存状态和热重载
• 保存状态并在上边覆盖显示报错
• 执行eslint
• 创建source map方便调试

// 把源码打包，给开发环境使用。放在打包之后多出的dist文件夹中。
npm run build

• 压缩js
• 压缩html
• 提取出所有组件的css合并成一个文件并压缩。
• 给所有的静态资源加上一个版本号的hash防止用户浏览器缓存过期文件。并在index.html中引入上述文件。

// 执行单元测试。
npm run unit
// 执行e2e测试。
npm run e2e
// 执行eslint检查代码错误，并显示。
npm run lint

Babel 配置

一般不需要修改。

Linter 配置

一般不需要修改。

预处理器

vue-cli已经支持了热门的css预处理器如sass，less，stylus和postCSS等。在组件中使用的时候，只要在