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 的完整路徑。