全面的Vue-cli學習，這一篇就夠了！

一、下載

使用vue-cli前，需先安裝node.js,node的安裝就不贅述，不過在此需要註意：

1. node版本需在4.x以上，首推6.x以上版本（node -v 命令查看）

2. npm要求在 3+ 版本以上 （npm -v 命令查看）

vue-cli下載（推薦NPM方式下載）

npm install -g vue-cli

二、項目初始化

vue init webpack firstVue

這裏的webpack為vue-cli最常用的模板名（此模板的項目配置包括：一個全功能的Webpack + vue-loader安裝程序，帶有熱重新加載，linting，測試和css提取），firstVue是項目的文件夾名稱。

官方將模板分為三類：

第一類為官方模板，通過使用 ”vue init 模板名 項目名” 即可初始化項目信息，具體有以下幾種：

webpack ：”一個全功能的Webpack + vue-loader安裝程序，帶有熱重新加載，linting，測試和css提取。

webpack-simple ： 簡單的Webpack + vue-loader設置，用於快速原型設計。

browserify ：全功能Browserify + vueify設置用熱重裝載，掉毛＆單元測試。

browserify -simple ：用於快速原型設計的簡單的Browserify + vueify設置。

pwa ：基於webpack模板的vue-cli的PWA模板

簡單 ：一個HTML文件中最簡單的Vue設置

第二類為自定義模板，自定義模板需要在github中fork請求，這個會在後續的進階中提到。

第三類為本地模板，使用 “ vue init?/ fs / path / to-custom-template my-project ” 命令進行初始化，這個也會在進階中提到。

三、項目構建

此處先使用最常用的webpack模板，通過 vue init webpack firstVue初始化後，會在當前文件夾下創建firstVue的子文件件,然後鍵入一下命令完成項目的構建：

cd firstVue
npm install
npm run dev

npm install 用以安裝此項目的依賴（此處涉及到包管理器的概念，需要node.js基礎），所有的依賴均存放在文件夾下的pack.json裏，查看dependence或devDependences等可以查看。

npm run dev 執行腳本命令下的dev命令，此命令的細節可在pack.json文件裏查看script下的dev屬性

腳本命令執行後，會顯示編譯是否成功，通過本機的端口可在服務器環境下訪問項目。

【Vue實戰之路】一、Vue-cli全面詳解及進階操作。