小編給大家分享一下如何使用vue-cli4.0快速搭建一個(gè)項(xiàng)目，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元百色做網(wǎng)站,已為上家服務(wù),為百色各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

一、升級(jí)本地環(huán)境

因?yàn)?vue-cli3.0 要 nodeJs ≧ 8.9（官方推薦 8.11.0+），所以我們先去 官網(wǎng)下載 一個(gè)穩(wěn)定的新版本覆蓋本地版本

我安裝的是 node12.13.0 版本，因?yàn)橹拔冶镜厝职惭b了 2.0 的環(huán)境，所以需要全局卸載再安裝 3.0

npm uninstall -g vue-cli
 
npm install -g @vue/cli

安裝好了之后輸入 vue -V 查看版本

我我我草?。?！最近只顧著看技術(shù)了，沒發(fā)現(xiàn)10月16日官方已經(jīng)宣布 vue-cli4.0 已經(jīng)正式發(fā)布了?。?！

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

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

二、搭建項(xiàng)目

vue-cli3.0 以后項(xiàng)目創(chuàng)建的命令變成了下面這樣

vue create  //文件名 不支持駝峰（含大寫字母）

竟然還被嫌棄了我的網(wǎng)速，我還就不用 cnpm 了！

選擇不使用淘寶鏡像后，選擇手動(dòng)配置

default 是使用默認(rèn)配置

Manually select features 是自定義配置

我的自定義配置如下

選擇是否使用路由 history router，其實(shí)直白來說就是是否路徑帶 # 號(hào)，建議選擇 N，否則服務(wù)器還要進(jìn)行配置

css 的預(yù)處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動(dòng)編譯實(shí)時(shí)的，dart-sass需要保存后才會(huì)生效

sass 官方目前主力推 dart-sass 最新的特性都會(huì)在這個(gè)上面先實(shí)現(xiàn)

選擇 ESLint 代碼校驗(yàn)規(guī)則，提供一個(gè)插件化的javascript代碼檢測(cè)工具，ESLint + Prettier 使用較多

然后選擇什么時(shí)候進(jìn)行代碼校驗(yàn)，Lint on save 保存就檢查，Lint and fix on commit fix 或者 commit 的時(shí)候檢查，建議第一個(gè)

下面就是如何存放配置了，In dedicated config files 存放到獨(dú)立文件中，In package.json 存放到 package.json 中

本著項(xiàng)目結(jié)構(gòu)簡(jiǎn)單的想法，我選擇了第二個(gè)

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

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

然后就等待創(chuàng)建項(xiàng)目吧

出現(xiàn)如圖紅框所示的提示，就搭建成功，進(jìn)入項(xiàng)目目錄，直接輸入 npm run serve 就可以了

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

很明顯，雖然項(xiàng)目能夠正常啟動(dòng)，但是我的 nodeJs 版本用的太高了，然后我給回退到了 11.11.0 版本

雖然沒影響太大的影響，但是我不想看見 WARN！回退之后，重新跑項(xiàng)目就不會(huì)有問題了。

三、環(huán)境配置

下面就是關(guān)于項(xiàng)目的環(huán)境配置了，我這邊一般喜歡用 test、preview、production分別表示測(cè)試，預(yù)覽，生產(chǎn)三種環(huán)境

修改 package.json 文件如下

"scripts": {
  "serve": "vue-cli-service serve",
  "test": "vue-cli-service build --mode test",      //測(cè)試
  "preview": "vue-cli-service build --mode preview",   //預(yù)覽
  "build": "vue-cli-service build --mode production",  //生產(chǎn)
  "lint": "vue-cli-service lint"
},

在項(xiàng)目根目錄下新建 .env.test、.env.preview、 .env.production 文件，分別對(duì)應(yīng)三個(gè)環(huán)境的配置文件，注意，名字要與 --mode 后面的名字分別對(duì)應(yīng)

.env.test 代碼如下

NODE_ENV="test"
VUE_APP_BASE_URL="測(cè)試環(huán)境域名"

.env.pre 代碼如下

NODE_ENV="preview"
VUE_APP_BASE_URL="預(yù)覽環(huán)境域名"

.env.prod 代碼如下

NODE_ENV="production"
VUE_APP_BASE_URL="生產(chǎn)環(huán)境域名"

ok，這樣環(huán)境就配置好了，分別用以下命令來打包不同環(huán)境的包就可以了

npm run test  //測(cè)試
npm run pre   //預(yù)發(fā)布
npm run prod  //生產(chǎn)

另外需要說明一點(diǎn)的是，本地環(huán)境會(huì)默認(rèn)從 .env.development 文件中讀取配置

所以記得有需要記得新建一個(gè)然后存放配置

我的 .env.development 代碼如下

NODE_ENV="development"
VUE_APP_BASE_URL="本地環(huán)境域名"

四、項(xiàng)目配置

從 vue-cli3.0 開始 build 和 config 目錄就取消了，如果需要修改配置，可以在項(xiàng)目的根目錄新建一個(gè) vue.config.js 文件來覆蓋項(xiàng)目的配置，因?yàn)轫?xiàng)目的配置比較多，這里就不分別介紹了，可以 訪問官方文檔

五、項(xiàng)目遷移

剩下的就是比較簡(jiǎn)單的工作了，因?yàn)?2.0/3.0/4.0 的src目錄是基本一致的，所以照著原來的項(xiàng)目搬進(jìn)來就可以了

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

看完了這篇文章，相信你對(duì)“如何使用vue-cli4.0快速搭建一個(gè)項(xiàng)目”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！