前端開發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、安裝插件

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

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