清澈的风

vue-cli+webpack搭建指南

vue-cli是vue官方提供的脚手架工具，常用于快速搭建SPA（Simple Page Application）单页应用。

webpack是当下最热门的前端资源模块化管理和打包工具。

它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
*更多请参考webpack中文指南

vue-cli提供了一些模板选项：

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • simple

webpack比webpack-simple多了一些语法检查如JSLint以及单元测试等功能，会在初始化的时候提供选项。simple仅仅会单独生成一个index.html页面。browserify是webpack出现前的产物，这里不再赘述。
总之，如果没有特殊需求的话，webpack-simple足以满足普通项目需要。

安装

所需条件：Node版本4.x以上，最好6.x ，npm版本3.x+以及Git

1
$ npm install -g vue-cli

初始化

1
$ vue init <模板名称> <项目名称>

例如我们这里选择webpack-simple模板，项目名称定为my-project

1
$ vue init webpack-simple my-project

运行

cd进入我们所生成的my-project目录

1
$ cd my-project

安装所需要的包

1
$ npm install

跳转到测试环境

1
$ npm run dev

会出现如下界面

这样初始搭建就完成了。

注意：
*在使用webpack-simple模板时，可能会由于:8080端口被占用而自动跳转到:8081端口，而当使用webpack模板时，会因为端口冲突报错无法执行，此时去config/index.js文件里去更改端口号port即可

*由于自动生成的js文件里使用了ES6语法，如果你使用的是webstorm，可以从设置里去选择语言库避免一些不必要的警告

vuevue-cliwebpack