正確姿勢使用vue cli3建立專案

前言

在19年8月份的時候，vue-cli更新到了3.X，新版本的腳手架封裝度更高，配置起來簡單許多，旨在讓使用者把精力都放在編寫業務程式碼中，本人從vue-cli2.X過渡到3.X挺適應的，畢竟3.X腳手架已經自動搭建在webpack4上，所以不用大家再去從webpack3升級到webpack4,當然效能也提高了很多，所以推薦大家使用cli3.X版本去搭建自己的專案，通過這篇教程幫大家熟悉使用vue cli3去搭建vue專案。

基於vue cli3開發的後臺管理系統，專案地址 vue-admin-webapp 歡迎star，fork

安裝

解除安裝舊版本：

如果你之前都是基於vue-cli2.X,你需要先解除安裝它：

#解除安裝vue-cli
npm uninstall -g vue-cli 
複製程式碼

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

安裝vue-cli：

npm install -g @vue/cli  // 安裝cli3.x
vue --version 或者 vue -V  //檢視版本是否為3.x
複製程式碼

Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你還是想繼續使用2.x搭建專案，你可以全域性安裝一個橋接工具：

npm install -g @vue/cli-init
# 然後你就可以繼續使用vue init了
npm init webpack my-project
複製程式碼

快速原型開發

你可以使用 vue serve 和 vue build 命令對單個 *.vue 檔案進行快速原型開發，不過這需要先額外安裝一個全域性的擴充套件：

npm install -g @vue/cli-service-global
複製程式碼

安裝完成之後，就新建一個資料夾，並建立一個.vue檔案，執行下面命令就跑起來了

vue serve app.vue  // 啟動服務
vue build app.vue  //打包出生產環境的包
複製程式碼

如下圖，只要建立一個app.vue檔案並執行 vue serve app.vue 就啟動服務了

這是一個很棒的功能，用於開發一個庫、元件，做一些小demo等都是非常適合的！

建立專案

初始化：

# 建立專案
vue create my-project // 其中my-project為專案目錄名稱
複製程式碼

點選回車後，就不斷有攔路記者訪問你

此處有兩個選擇：

• default (babel, eslint) 預設配置 提供babel和eslint支援
• Manually select features 自己手動去選擇需要的配置

可以同過上下鍵，空格來選擇，一般會選擇手動的配置如下：

對於每一項的功能，做一下簡單闡述：

• Babel 主要是對es6語法轉換成相容的js （選上）
• TypeScript 支援使用TypeScript語法來編寫程式碼
• PWA PWA 支援
• Router 支援vue路由配置外掛（一般都會選擇）
• Vuex 支援vue程式狀態管理模式 (一般都會選擇)
• CSS Pre-processors 支援css前處理器 （一般都會選擇）
• Linter / Formatter 支援程式碼風格檢查和格式化 （選上）
• Unit Testing 單元測試
• E2E Testing E2E測試

那麼基於開發常見的專案，一般選擇如下：

選擇完成後回車：

這的意思是問你本次專案是否採用history模式，如果選擇Y,需要後臺配置具體看vueRouter官網解釋，這裡我門選擇 n

選擇完成後回車：

這裡是問你選擇一種css預處理，我專案一般使用SCSS，所以這塊我選擇第一個，回車後：

這裡是問你選擇一種格式化程式碼方式，我用VSCode，所以一般選擇 ESlint + Prettier,選擇回車：

這裡問你什麼時候進行程式碼規則檢測，一般會選擇儲存就檢測，也就是Lint on save 選擇回車：

這問將Babel,PostCSS,ESLint這些配置檔案放哪，通常我們會選擇放到獨立位置，讓package.json檔案乾淨點，所以選擇第一個 點選回車：

這裡是問你是否記錄這次配置選擇，選擇之後會讓你為這次配置起一個名字，這樣下次可以直接快速配置選擇，最後回車後就會初始化專案了，完成後如下圖：

根據提示，我們執行指令 cd my-project 然後執行命令npm run serve 這樣就開始啟動專案了

這是開啟 http://localhost:8080 ：

當我們需要自定義webpack相關配置的時候需要在專案根目錄中建立vue.config.js檔案，它會被@vue/cli-server自動載入，相關配置內容官網將的很詳細，可以點選檢視

當我們需要調整webpac k配置的時候，可以通過chainWebpack屬性進行鏈式操作，這裡有個技巧就是通過 vue inspect --mode production product.js 或vue inspect > development.js 來導處生產和開發環境的配置檔案，檔案裡面包含了鏈式訪問的規則，這樣我們就可以通過鏈式操作來修改新增webpack配置。

好了整個初始化專案已經完成，接下來就是編寫程式碼了，有關vue cli3還有個新功能就是使用圖形化介面建立/管理/執行專案，這裡我就不說，大家可以去官網看看具體教程吧。