天天看點

跟着項目學Vue.js(二) 腳手架

項目初始化要求:

                  1)路由格式為history

                  2)CSS 預處理使用less

                  3)ui自動化測試使用NightWatch

                  4)文法規則和代碼風格的檢查工具使用eslint+airbnb

下面開始嘗試用官方提供的腳手架建立示例項目。

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

環境 windows+nodejs+npm+yarn

1、安裝腳手架 vue-cli 3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli
           

     檢視腳手架版本

vue --version
3.0.1
           

2、用腳手架建立第一個Vue項目

1)通過 

vue ui

 指令以圖形化界面建立和管理項目

D:\VueProject>vue ui
           

2)打開浏覽器,輸入http://localhost:8000,進入Vue項目管理器,選擇建立,确認項目路徑沒有問題後,點選【在此建立項目】按鈕

跟着項目學Vue.js(二) 腳手架

3)進入建立新項目頁,選擇詳情。填寫項目檔案夾文本框,選擇包管理器,這裡選yarn。。。不選npm,主要是因為npm的的網絡問題導緻其需要更多的配置,目前版本的腳手架預設就是yarn。

跟着項目學Vue.js(二) 腳手架

4)切到預設,選擇手動,以便我們按照項目要求進行靈活設定。

跟着項目學Vue.js(二) 腳手架

5)切到功能,打開Router、Vuex、Css Pre、Linter/Formatter這四個開關。

跟着項目學Vue.js(二) 腳手架

6)點選下一步,切到配置

Router:選擇hisory模式

Css Pre:選擇less

Linter/Formatter:選擇ESLint+Airbnb

E2E Testing:選擇NightWatch

至此,該項目的初始化要求已經設定完畢

跟着項目學Vue.js(二) 腳手架

7)點選【建立項目】按鈕,彈出儲存為新預設選項,填寫預設名【ProjectStandard】,然後點選【儲存預設并建立項目】按鈕,儲存生成可複用的 preset。我們後面的真實項目仍會複用該配置建立項目。

跟着項目學Vue.js(二) 腳手架

8)建立完成後,點選任務,進入serve頁,點選【運作】按鈕

跟着項目學Vue.js(二) 腳手架

9)切到輸出,檢視啟動過程,啟動成功後,提示App運作在8080端口

跟着項目學Vue.js(二) 腳手架

10)打開浏覽器,輸入位址,檢視啟動效果

跟着項目學Vue.js(二) 腳手架

如果建立過程中,提示安裝chromedriver時連接配接 216.58.220.208:443逾時,導緻後面的步驟無法進行,最終安裝失敗。

解決辦法:給yarn設定chromedriver源,設定成淘寶連結

yarn config set "chromedriver_cdnurl" "https://npm.taobao.org/mirrors/chromedriver"
           

npm安裝的話同理 ,把yarn換成npm

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

方案二:

cmd中運作以下指令來建立一個新項目:

vue create project-name
           

通過設定指令行中的選項初始化項目。

這種方式在Vue CLI 3官方網站有詳細的步驟,這裡就不再重複造輪子了。

位址:https://cli.vuejs.org/zh/guide/creating-a-project.html