使用veu-cli3/4搭建vue項目詳細配置

使用vue-cli4 搭建vue項目

一、安裝vue-cli4

1. 查看版本號：命令行中輸入vue -V查看一下vue-cli的版本，如果之前安裝過2XX版本的vue-cli，卸載後安裝新的。
2. 卸載舊版本：npm uninstall vue-cli -g
3. 安裝最新版本：npm install -g @vue/cli
4. 安裝指定版本：npm install -g @vue/[email protected]，比如安裝3.11.0版本的，需要@後接版本號
   

二、創建一個vue項目

1. 創建位置：我想將整個前端的項目放在code文件夾中，當前文件夾出打開終端即可。

2. 創建項目：命令行輸入vue create questionnaire

三、預設選項

1. 創建成功之後會彈出一個預設選項，第一個是默認設置，第二個是手動選擇設置，選中第二個後回車。
   
2. vue-cli提供了一些快速安裝的選項，按上下箭頭移動，按空格選擇，需要的都選擇了之後，按Enter。
   我選擇了以下的安裝（並不是一定按照我的選，選自己項目用的就可以了）。
   

• Babe：一個js編譯器，主要是將es6的代碼轉換爲向後兼容的js語法，以便讓js更好的運行在舊版本的瀏覽器或環境中。babel官網，學習更多>
• TypeScript：可以理解爲一個嚴格版的JS。TypeScript官網，學習更多>
• Router：vue的路由管理器。vue-router官網,學習更多>
• Vuex：一個專爲vue開發的狀態管理模式，用於集中存儲組件的狀態。vuex官網,學習更多>
• CSS pre-processor：css預處理語言,css本身是寫樣式的，css預處理語言也是用於編輯樣式，最後編譯成css文件，css預處理語言擴展了css,增加了變量、函數等功能，讓css更簡潔，可讀性更強，更容易維護，css預處理語言有很多，less、scss等。
• Unit Testing：單元測試，對最小可測試的單元進行的檢查和驗證。Unit Testing官網，學習更多>
• E2E Testing：端對端測試，通過編寫測試用例，自動化模擬用戶操作，對功能、流程進行檢查和驗證。

4. 預設選項選擇之後，會根據預設安裝的選項，選擇更具體的設置
   我的選擇如下（並不是一定按照我的選）
   

• Use class-style component syntax：是否使用Class風格的語法（es6的Class）。阮一峯es6的Class講解，學習更多>
• Use history mode for router?：是否用history模式的路由（路由的hash模式和history模式）
• Pick a CSS pre-processor？：是否選一個CSS預處理語言？（我選了less）
• Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?：你將Babel、PostCSS、ESLint等配置放在哪?
• Save this as a preset for future projects？：上面選中的配置是不是要保存起來，作爲你將來項目的預設？
  

四、啓動項目

使用vue-cli成功創建了項目之後，首先需要cd到當前項目中，如果此時項目中沒有node-modules文件夾，可以先執行npm install，然後運行項目。

1. cd到當前項目中 cd vue-demo
2. 下載依賴包：npm install
3. 運行項目：npm run serve
   

五、可視化UI

目前項目就可以正常啓動了，但是一個項目根據需求可能還需要安裝其他的依賴包，比如需要element UI、axios，寫tsx的還要安裝vue-tsx.support等，項目的依賴可以在package.json中查看，當然vue還提供了更直觀的插件 vue ui。

1. 命令行中輸入vue -V，查看已經安裝了vue-cli，如果有版本號，則安裝成功。
2. 輸入vue ui，此時會在瀏覽器中新打開一個頁面Vue項目管理器。
   
3. 點擊導入，導入已經創建的項目文件夾，導入成功後，可以直觀的看到這個項目的依賴、插件和配置等。