Vue.js(一) 基于vue-cli腳手架工具構(gòu)建Vue項(xiàng)目

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é)果如下圖所示:

vue-list.png

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

參考文章

https://github.com/vuejs/vue-cli

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容