Vue.js(一) 基於vue-cli腳手架工具構建Vue專案

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

操作結果如下圖所示:

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

參考文章

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