vue cli腳手架安裝

vue-cli 是vue官方提供的乙個腳手架工具，用於初始化乙個vue專案； 

vue-cli的優勢:

1、成熟的vue專案架構設計，而且會跟隨vue版本的更迭而更新； 

2、提供了一套本地測試伺服器，而且是乙個熱載入的伺服器； 

3、提供了自己的一套整合打包上線的方案，webpack 或者gulpify在建立專案的時候可以進行選擇； 

有了以上優勢，可以非常快速的搭建專案； 

vue-cli對系統的要求:

vue-cli 是命令列的乙個工具，系統需要

1、node.js(>=4.x)

2、能使用node的命令列終端； 

第一步，我們安裝node.js

進入nodejs官網：

測試安裝是否ok；  node --version

有版本號出來，就說明沒毛病；

以及安裝node的時候，npm包管理工具也是一併安裝的；

第二步：安裝vue-cli；

vue-cli腳手架最新版本是3，我們先學習穩定版2

全域性安裝命令：npm install -g [email protected]

執行後，慢慢等待吧，要搞一會呢；

等安裝完後，vue -v

說明vue-cli安裝沒毛病；

第三步：使用vue-cli腳手架來新建vue專案；

命令：vue init webpack vue_demo

vue_demo是專案名稱，我們自己取名即可；

通過腳手架可以設定名稱，以及定製外掛程式；

一些設定選項：

設定專案名稱，專案描述，作者，以及選擇構建模式，我們選執行+編譯模式；

vue-router要講到用到，所以選用，

eslint**驗證用到講到，所以選用，以及選標準模式；

我們不用單元測試，所以no，以及e2e測試 也是no

模版專案就ok了；

每個檔案的詳解，可以參考：

後面我們也會講解和熟悉到這些配置；需要有個過程；

第四步：執行專案

我們先開啟webstorm 然後open開啟剛才的vue_demo專案

開啟左下角終端terminal 輸入啟動命令：npm run dev

啟動ok；我們瀏覽器輸入 http://localhost:8080 啟動專案

顯示這個的話 就說明完全ok；

第五步：優化配置，輕鬆寫學習開發；

我們稍微優化下配置，讓埠搞成預設80，以及啟動後自動開啟瀏覽器，順便熟悉下配置；

開啟config下的index.js 把 port改成80 autoopenbrowser改成true即可。

然後 重啟試下；

vue cli腳手架安裝

映象使用方法 三種辦法任意一種都能解決問題，建議使用第三種，將配置寫死，下次用的時候配置還在 1.通過config命令 npm config set registry npm info underscore 如果上面配置正確這個命令會有字串response 2.命令列指定 npm registry ...

vue cli腳手架安裝

2.執行cmd，檢視版本號 出現版本號說明安裝成功 輸入 node v 檢視node版本號 需要在6.9以上 輸入 npm v 檢視npm版本號 需要在3.10以上 3.命令列工具 在cmd裡安裝 全域性安裝 vue cli npm install global vue cli mac機全域性安裝需...

安裝腳手架vue cli

cnpm install global vue cli要建立專案，首先我們要選定目錄，然後再命令列中把目錄轉到選定的目錄。可以使用 vue init webpack my project初始化乙個專案，或使用 vue init webpack my project執行初始化命令的時候回讓使用者輸入幾...