作者：李小成  

 

vue-cli腳手架模板是基於node下的npm來完成安裝，這篇文章主要介紹了vue-cli腳手架的安裝教程圖解 ,需要的朋友可以參考下

 

 vue-cli腳手架模板是基於node下的npm來完成安裝，下面給大家介紹vue-cli腳手架的安裝，具體內容如下所述：

https://github.com/vuejs/vue-cli  官網 使用官方推薦的webpack

條件：

node在4.以上，npm在3以上，查看版本號打開cmd輸入，node -v npm -v;

安裝步驟：

1、cmd打開命令行窗口

2、輸入npm install vue-cli -g，然後回車等待

3、安裝結束後輸入vue 查看是否安裝成功

4、運行vueinitwebpack demo(注：項目名稱)回車，(想在哪個目錄建立vue項目就要在進入到對應目錄再輸入命令)

5、顯示Project nanme 項目名 回車（項目名不允許使用大寫）

6、project description 後面可以寫上描述，或者直接回車

7、Author 後面可以寫作者也可以回車 （如果配置過git會自動獲取git的name）

8、Install vue-router? 選擇Y（官方推薦的路由插件，幾乎每個項目都用得到）

9、User ESLint to lint your code? 選Y（是否啓用eslint檢測規則，如果不是公司的大型項目或者多人共同開發博主感覺沒有必要安裝）

10、Set up unit tests? 問的是否要測試 選n

11、Setup e2e tests with Nightwatch? 選n（ 用Nightwatch設置E2E測試？）

12、Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 選擇使用npm、還是yarn安裝，一般都是直接回車就好

13、這個時候在你創建的目錄下就有你的目錄了

14、cd 你的目錄名然後輸入npm run dev啓動應用，啓動成功它會自動打開一個vue頁面

到此為止你已經學會了怎麼安裝 vue-cli腳手架工具了，下面我簡單的説明下各個目錄都是幹嘛的：

main.js的介紹

el是掛載點，router是路由

App.vue 是整個文件的入口，有三部分，template模板 script 邏輯 style樣式

總結

以上所述是小編給大家介紹的vue-cli腳手架的安裝教程圖解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！