前端開發3年了，竟然不知道什麼是 Vue 腳手架？（下）

上一篇文章《前端開發3年了，竟然不知道什麼是 Vue 腳手架？（上）》介紹了什麼是腳手架，以及Vue-cli 2.x如何建立專案，建立的專案結構。這篇文章介紹 Vue-cli 3.x 如何構建專案？

一、Vue-cli 2 與 Vue-cli 3的區別

1. vue-cli 3 是基於 webpack 4 打造的，vue-cli 2 還是 webpack 3。
2. vue-cli 3 的設計原則是 “0配置”，移除 build 和 config 等配置目錄。
3. vue-cli 3 提供了 vue ui 命令，提供視覺化配置，更加人性化。
4. vuc-cli 3 移除 static 資料夾，新增 public 資料夾，index.httml 移入了 public 資料夾。

接下來看看，vue-cli 3 是如何建立專案的，以及視覺化配置是怎麼樣的？

二、Vue CLI 3.x 初始化專案

2.1、新建專案資料夾，開啟命令列

vue create learn

執行以上命令，建立檔名為learn的vue專案。

執行命令如下圖：

 

方框內提示我們發現有可用新版本腳手架，可以執行下邊命令進行更新。

下邊有三個選項，分別為：

• Please pick a preset:(Use arrow keys) - 請選擇一個已配置的關鍵字選項
• default (babel,eslint) - 預設的，選babel和eslint包
• Manually select features - 手動選擇需要的特性

2.2、選擇最後一個手動配置

 

選擇之後，如上圖。最前邊的括號內有個綠色星號，表示被選中，我們可以使用上下箭頭進行切換，點選空格進行選中和取消。

根據需要，選擇完成之後，點選回車繼續向下。

2.3、選擇配置檔案型別

 

In dedicated config files - 獨立配置檔案

In package.json - 配置資訊放入 package.json檔案

選擇 獨立配置檔案之後，繼續向下。

2.4、是否儲存本次建立專案特性作為配置項？

提示後攜帶(y/n)，輸入y表示確定儲存配置，n表示取消儲存。

 

我們選擇 y 儲存之後，以後建立專案就不需要選擇這麼多了，一鍵就可以生成專案。

 

緊接著需要配置鍵值，下次我們可以通過鍵值就能看到，比如設定一個前端人的簡寫：qdr。回車之後專案就開始建立了。

2.5、如何檢視之前儲存的配置選項，如果不需要了我們如何刪除呢？

再次建立專案的時候，第一個選項就多了一項，如圖：

 

第一個 “qdr” 是我們上次建立專案儲存的配置資訊。如果我們不想要了，或者儲存的多了之後，把不常用的就需要刪除掉，可以進入：C/user/Administrator 查詢 .vuerc 檔案。

rc = run command,vuerc也就是vue的執行命令，它的內容如下：

{
 "useTaobaoRegistry": true,
 "presets": {
  "qdr": {
   "useConfigFiles": true,
   "plugins": {
    "@vue/cli-plugin-babel": {}
    }
   }
 },
 "latestVersion": "4.5.13",
 "lastChecked": 1630908642473
}

 

我們只需要刪除 presets 中，不想要的配置項就好了，再執行命令，命令中就沒有了。

如此，我們的vue-cli 3的專案就建立完成了。

三、Vue-cli 3 專案結構介紹

對新建的專案結構截圖，如下圖：

 

它們的檔案以及對應的意義如下：

• node_modules - 專案需要用的node包
• public - 相當於static 資料夾，原樣輸出
• src - 開發資源
• .browserslistrc - 瀏覽器相關配置
• .gitignore - 設定提交 git 的忽略資訊
• babel.config.js - 對 babel 配置資訊
• package-lock.json - 記錄依賴包的真實版本
• package.json - 配置檔案
• README.md - 使用介紹

四、專案執行

開啟 package.json 檔案，查詢 scripts 內執行指令碼，我們發現 server 。

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

 

4.1、啟動服務

npm run serve

4.2、main.js 內容改變了

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

 

我們發現之前的 el:'#app' 丟失了，而後邊又多了 $mount("#app")。

el: "#app" , 是掛載例項的

$mount("#app") 功能是一樣的，所以替換下與之前的vue-cli使用runtime-only是一致的。

執行，打包配置與之前都是差不多，最重要的是vue-cli 3多了一個圖形化介面管理工具，具體看看如何使用。

五、圖形化介面管理工具

使用命令，啟動我們的圖形化介面管理服務，使用：

vue ui

啟動之後，提示我們服務地址為：http://localhost:8000/

 

第一次進入之後，沒有選擇的專案，所以提示我們先匯入專案。

5.1、啟動專案、打包

選擇一個專案，進行匯入之後，介面自動切換

 

選擇任務 -> serve -> 點選開始執行，就可以看到專案的具體執行情況，檔案大小、包的依賴、執行時間，服務地址等等。

 

build 是進行打包的。

5.2、專案配置

之前修改配置資訊的時候，我們需要在程式碼的配置檔案中修改，vue-cli 3提供的圖形化介面管理工具，可以直接在頁面上修改配置資訊。

配置資訊分別如下圖：

 

特殊說明下：啟動執行時編譯

我們上篇文章介紹 Runtime+compiler 與 Runtime-only區別，啟動執行時編譯 其實就是選擇Runtime-only 模式。

5.3、依賴包安裝

我們選擇依賴選項，就會展示專案當前的執行依賴和開發依賴。如圖所示：

 

之前我們需要安裝依賴的時候，執行命令去安裝，如：我們需要安裝vue-router的時候，需要使用命令：

npm install vue-router --save-dev

但是現在就不需要了，只需要點選 “安裝依賴”，搜尋 vue-router，選擇執行依賴或開發依賴，然後點選安裝就可以了，不需要我們記住命令。

5.4、安裝外掛

外掛與依賴包有些型別，直接點選新增，安裝就可以了。

圖形化介面管理工具使用起來還是很方便的，推薦使用哦！小編今日分享就要介紹了，喜歡的可以點贊關注不迷路，感謝支援！