Vue.js(一) 基于vue-cli脚手架工具构建Vue项目
2017-05-19 本文已影响325人
暮落晨曦
Vue.js 是目前最火的前端框架，几乎没有之一，资深程序员这样评价它："Vue.js 兼具 Angular.js 和 React.js 的优点，并剔除它们的缺点"，大多前端工程师都视 Vue.js 为心中最理想的框架。
学习 Vue.js 建议查看 Vue 官方中文文档。当然如果英语能力好的话，推荐查看 Vue 官方英文文档，因为对某些 API 的理解，还是英文的文档更容易一些。个人看法，勿喷。
简介
vue-cli 是一个快速构建 Vue.js Project 的脚手架工具。
安装
注: Node.js 版本(>=4.x, 6.x 更高) npm 版本 3+ 并且保证有 Git 环境
npm install -g vue-cli
用法
vue init <template-name> <project-name>
例:
vue init webpack first-vue-project
上述命令是在当前目录下，通过vue-cli命令根据 vuejs-templates/webpack 下的模板，生成一个包含 webpack 的 Vue 项目，名为 first-vue-project
相关模板
| 模板名 | 模板介绍 |
|---|---|
| browserify | 包含 browserify 和 vueify 功能齐全的项目模板，可以设置热更新(Hot Reload)、代码检测 (Lint) 以及单元测试 |
| browserify-simple | 快速构建简易 browserify 和 vueify 项目的模板 |
| pwa | vue-cli 基于 webpack 模板构建 PWA(渐进式网页应用) |
| simple | 简单构建一个只包含 HTML 的项目 |
| webpack | 一个功能齐全的 webpack + vue-loader 模板，模板中还可以设置热更新、代码检测(Lint)、测试以及 CSS 提取 |
| webpack-simple | 快速构建基于 webpack + vue-loader 的简易项目模板 |
以上模板可通过命令 list 查看
vue list
操作结果如下图所示:
vue-list.png
自定义template
官方的 template 可能有时并不能满足你的需求，此时，你可以 fork 官方的模板，进行自己的改造，并通过 vue-cli 工具根据改造后的 template 进行构建:
vue init username/repo my-project
例:
vue init QC-L/webpack-multi-page-template vue-multi-page-demo
其中 username/repo 为 Github 的 repo 标题，例如 QC-L/webpack-multi-page-template
构建工具会根据你提供的标题，进行模板下载，并进行 template 构建
本地template
除了 Github 源之外，你还可以使用本地 template 进行构建:
vue init ~/fs/path/to-custom-template my-project
例:
vue init ~/vue/template/webpack-multi-page-template vue-multi-page-demo
此时，template-name 就为你本地 template 的完整路径。
