【vue】使用vue-cli4.0快速搭建一個項目

前言

最近公司的項目終于到了空閑期，而閑不住的我終于把目标放到了項目的遷移上面

因為公司的項目比較早的原因（雖然當時vue-cli也出來了一段時間，但是不敢輕易嘗試啊！）

是以使用的環境還是 vue2.x 版本的，而又因為公司的前端項目都是我來搭建的原因（并不是技術大佬，入職早！）

是以所有項目開發的時候一直在用的 vue-cli2.0，後來項目多了也沒時間就沒往 vue-cli3.0 遷移

現在終于到了空閑期，可以嘗試着慢慢遷移了

本篇文章就是主要記錄遷移的過程和 vue-cli3.0 的搭建過程

一、更新本地環境

因為 vue-cli3.0 要 nodeJs ≧ 8.9（官方推薦 8.11.0+），是以我們先去 官網下載下傳 一個穩定的新版本覆寫本地版本

我安裝的是 node12.13.0 版本，因為之前我本地全局安裝了 2.0 的環境，是以需要全局解除安裝再安裝 3.0

npm uninstall -g vue-cli

npm install -g @vue/cli

安裝好了之後輸入 vue -V 檢視版本

我我我草！！！最近隻顧着看技術了，沒發現10月16日官方已經宣布 vue-cli4.0 已經正式釋出了！！！

有沒有搞錯，我 vue-cli3.0 還沒來得及用上呢！還好看了下文檔，除了跟 vue-cli3.0 的目錄有點變化其他沒變。

那就直接開始搞 vue-cli4.0 吧！

二、搭建項目

vue-cli3.0 以後項目建立的指令變成了下面這樣

vue create <Project Name> //檔案名 不支援駝峰（含大寫字母）

竟然還被嫌棄了我的網速，我還就不用 cnpm 了！

選擇不使用淘寶鏡像後，選擇手動配置

default 是使用預設配置

Manually select features 是自定義配置

我的自定義配置如下

選擇是否使用路由 history router，其實直白來說就是是否路徑帶 # 号，建議選擇 N，否則伺服器還要進行配置

css 的預處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動編譯實時的，dart-sass需要儲存後才會生效

sass 官方目前主力推 dart-sass 最新的特性都會在這個上面先實作

選擇 ESLint 代碼校驗規則，提供一個插件化的javascript代碼檢測工具，ESLint + Prettier 使用較多

然後選擇什麼時候進行代碼校驗，Lint on save 儲存就檢查，Lint and fix on commit   fix 或者 commit 的時候檢查，建議第一個

下面就是如何存放配置了，In dedicated config files 存放到獨立檔案中，In package.json 存放到 package.json 中

本着項目結構簡單的想法，我選擇了第二個

最後就是是否儲存本次的配置了，N 不記錄，如果選擇 Y 需要輸入儲存名字

我這裡就不儲存了，原因是熟能生巧！哈哈哈

然後就等待建立項目吧

出現如圖紅框所示的提示，就搭建成功，進入項目目錄，直接輸入 npm run serve 就可以了

你以為這樣就完了嗎？我也是這樣認為的，可它不是這樣的！

很明顯，雖然項目能夠正常啟動，但是我的 nodeJs 版本用的太高了，然後我給回退到了 11.11.0 版本

雖然沒影響太大的影響，但是我不想看見 WARN！回退之後，重新跑項目就不會有問題了。

三、環境配置

下面就是關于項目的環境配置了，我這邊一般喜歡用 test、preview、production分别表示測試，預覽，生産三種環境

修改 package.json 檔案如下

"scripts": {

    "serve": "vue-cli-service serve",

    "test": "vue-cli-service build --mode test",           //測試

    "preview": "vue-cli-service build --mode preview",     //預覽

    "build": "vue-cli-service build --mode production",    //生産

    "lint": "vue-cli-service lint"

},

在項目根目錄下建立 .env.test、.env.preview、 .env.production 檔案，分别對應三個環境的配置檔案，注意，名字要與 --mode 後面的名字分别對應

.env.test 代碼如下

NODE_ENV="test"

VUE_APP_BASE_URL="測試環境域名"

.env.pre 代碼如下

NODE_ENV="preview"

VUE_APP_BASE_URL="預覽環境域名"

.env.prod 代碼如下

NODE_ENV="production"

VUE_APP_BASE_URL="生産環境域名"

ok，這樣環境就配置好了，分别用以下指令來打包不同環境的包就可以了

npm run test    //測試

npm run pre     //預釋出

npm run prod    //生産

另外需要說明一點的是，本地環境會預設從 .env.development 檔案中讀取配置

是以記得有需要記得建立一個然後存放配置

我的 .env.development 代碼如下

NODE_ENV="development"

VUE_APP_BASE_URL="本地環境域名"

四、項目配置

從 vue-cli3.0 開始 build 和 config 目錄就取消了，如果需要修改配置，可以在項目的根目錄建立一個 vue.config.js 檔案來覆寫項目的配置，因為項目的配置比較多，這裡就不分别介紹了，可以 通路官方文檔

五、項目遷移

剩下的就是比較簡單的工作了，因為 2.0/3.0/4.0 的src目錄是基本一緻的，是以照着原來的項目搬進來就可以了

唯一需要注意的就是路徑的問題了

結束語

本來，這個文章真的是為了從 2.0 遷移到 3.0 的，沒想到 4.0 都釋出了，那剛好遷移到 4.0 得了

文章标題我會修改為 4.0，但是文章内可能還會有 3.0 我就不修改了

一是證明我的最初想法，二是感慨前端的發展速度！