Vue.js 是目前最火的前端框架，幾乎沒有之一，資深程序員這樣評價(jià)它："Vue.js 兼具 Angular.js 和 React.js 的優(yōu)點(diǎn)，并剔除它們的缺點(diǎn)"，大多前端工程師都視 Vue.js 為心中最理想的框架。
學(xué)習(xí) Vue.js 建議查看 Vue 官方中文文檔。當(dāng)然如果英語能力好的話，推薦查看 Vue 官方英文文檔，因?yàn)閷δ承?API 的理解，還是英文的文檔更容易一些。個人看法，勿噴。
簡介
vue-cli 是一個快速構(gòu)建 Vue.js Project 的腳手架工具。
安裝
注: Node.js 版本(>=4.x, 6.x 更高) npm 版本 3+ 并且保證有 Git 環(huán)境
npm install -g vue-cli
用法
vue init <template-name> <project-name>
例:
vue init webpack first-vue-project
上述命令是在當(dāng)前目錄下，通過vue-cli命令根據(jù) vuejs-templates/webpack 下的模板，生成一個包含 webpack 的 Vue 項(xiàng)目，名為 first-vue-project
相關(guān)模板
| 模板名 | 模板介紹 |
|---|---|
| browserify | 包含 browserify 和 vueify 功能齊全的項(xiàng)目模板，可以設(shè)置熱更新(Hot Reload)、代碼檢測 (Lint) 以及單元測試 |
| browserify-simple | 快速構(gòu)建簡易 browserify 和 vueify 項(xiàng)目的模板 |
| pwa | vue-cli 基于 webpack 模板構(gòu)建 PWA(漸進(jìn)式網(wǎng)頁應(yīng)用) |
| simple | 簡單構(gòu)建一個只包含 HTML 的項(xiàng)目 |
| webpack | 一個功能齊全的 webpack + vue-loader 模板，模板中還可以設(shè)置熱更新、代碼檢測(Lint)、測試以及 CSS 提取 |
| webpack-simple | 快速構(gòu)建基于 webpack + vue-loader 的簡易項(xiàng)目模板 |
以上模板可通過命令 list 查看
vue list
操作結(jié)果如下圖所示:
自定義template
官方的 template 可能有時并不能滿足你的需求，此時，你可以 fork 官方的模板，進(jìn)行自己的改造，并通過 vue-cli 工具根據(jù)改造后的 template 進(jìn)行構(gòu)建:
vue init username/repo my-project
例:
vue init QC-L/webpack-multi-page-template vue-multi-page-demo
其中 username/repo 為 Github 的 repo 標(biāo)題，例如 QC-L/webpack-multi-page-template
構(gòu)建工具會根據(jù)你提供的標(biāo)題，進(jìn)行模板下載，并進(jìn)行 template 構(gòu)建
本地template
除了 Github 源之外，你還可以使用本地 template 進(jìn)行構(gòu)建:
vue init ~/fs/path/to-custom-template my-project
例:
vue init ~/vue/template/webpack-multi-page-template vue-multi-page-demo
此時，template-name 就為你本地 template 的完整路徑。
