vue-cli3初始化項目搭建

vue-cli3初始化項目

注：安裝前確保有安裝node，而且node >= 8.9 （推薦 8.11.0+）

• 全局安裝vue

npm install -g @vue/cli
複製代碼

若是以前安裝了vue舊版本，查看 vue --version，若是不是3.X，請先卸載再安裝 npm uninstall vue-cli -g

• 建立項目

vue create vue-cli3-init
複製代碼

注：名稱不能採用駝峯命名

vue-cli3也能夠採用UI面板進行配置，相對比較方便，目前先寫命令行建立，後續再加上面板建立。

選擇配置，默認配置仍是手動，這裏我選擇手動Manually，繼續回車會讓你選擇你想要功能。 （不用用git窗口，選擇不了選項，能夠使用上下方向來切換選項）

此處有兩個選擇：

• default (babel, eslint) 默認套餐，提供 babel 和 eslint 支持。
• Manually select features 本身去選擇須要的功能，提供更多的特性選擇。好比若是想要支持 TypeScript，就應該選擇這一項。

回車後可進行選擇，8個功能特性，能夠多選： 使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇全部，使用 i 鍵翻轉選項。個人選擇以下，請根據本身須要進行選擇。

對於每一項的功能，此處作個簡單描述：

• TypeScript 支持使用 TypeScript 書寫源碼。
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 預處理器。
• Linter / Formatter 支持代碼風格檢查和格式化。
• Unit Testing 支持單元測試。
• E2E Testing 支持 E2E 測試。

是否選擇history模式，根據本身須要選擇。（我選擇n）

是否選擇預語言，根據本身須要選擇。（我選擇sass）

是否ESlint輸出，根據本身須要選擇。（我選擇默認）

是否保存時或者提交時是進行ESlint校驗，根據本身須要選擇。（我選擇保存）

選擇把配置文件放在外面，選擇 In dedicated config files

要不要把當前的這一系列選項配置保存起來，方便下一次建立項目時複用。我選擇n

項目初始化完成，進入項目:

cd vue-cli3-init
複製代碼

依賴安裝完成以後啓動項目：

npm run serve
複製代碼

看到這樣的畫面你能夠飛起來了，若是須要進行項目優化，能夠參考個人下一篇文章