使用vue-cli3/4 搭建vue項目

使用vue-cli4 搭建vue項目

1、安裝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/cli@3.11.0，好比安裝3.11.0版本的，須要@後接版本號

2、建立一個vue項目

1. 建立位置：我想將整個前端的項目放在code文件夾中，當前文件夾出打開終端便可。
2. 建立項目：命令行輸入vue create questionnaire

3、預設選項

1. 建立成功以後會彈出一個預設選項，第一個是默認設置，第二個是手動選擇設置，選中第二個後回車。

1. 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：端對端測試，經過編寫測試用例，自動化模擬用戶操做，對功能、流程進行檢查和驗證。

1. 預設選項選擇以後，會根據預設安裝的選項，選擇更具體的設置
   個人選擇以下（並非必定按照個人選）
   

• 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？：上面選中的配置是否是要保存起來，做爲你未來項目的預設？

4、啓動項目

使用vue-cli成功建立了項目以後，首先須要cd到當前項目中，若是此時項目中沒有node-modules文件夾，能夠先執行npm install，而後運行項目。

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

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

1. 命令行中輸入vue -V，查看已經安裝了vue-cli，若是有版本號，則安裝成功。
2. 輸入vue ui，此時會在瀏覽器中新打開一個頁面Vue項目管理器。

1. 點擊導入，導入已經建立的項目文件夾，導入成功後，能夠直觀的看到這個項目的依賴、插件和配置等。