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

2021 年 10 月 9 日
筆記
VUE

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

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

vue-cli 3 是基於 webpack 4 打造的，vue-cli 2 還是 webpack 3。
vue-cli 3 的設計原則是「0配置」，移除 build 和 config 等配置目錄。
vue-cli 3 提供了 vue ui 命令，提供可視化配置，更加人性化。
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

啟動之後，提示我們服務地址為：//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、安裝插件

插件與依賴包有些類型，直接點擊添加，安裝就可以了。

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

Tags: VUE