搭建：Vue CLI 5 + Vue 3 + Ant Design Vue 3

• Vue CLI 5：是vue + 大量的第三方組件；
• Vue 3：是頁面開發(fā)基于Vue；
• Ant Design Vue 3：是基于Vue3的UI組件；關(guān)于UI還有CSS的Bootstrap。

1. 本地環(huán)境準(zhǔn)備

按照NodeJS得到npm，使用npm安裝 vue cli(腳手架)，使用vue cli創(chuàng)建項目。

Vue CLI 5 需要安裝 Nodejs 18及以上。

NodeJS官網(wǎng)：https://nodejs.org/zh-cn/

Vue CLI 官方文檔：https://cli.vuejs.org/zh/guide/

1) Node18安裝

 目前使用最多的是14，16，18，20。已經(jīng)下載過有不同版本的直接修改配置就好了。

下載好后點擊安裝，設(shè)置好路徑后直接 next 下一步，不需要選任何東西。

到這里也不需要勾選。

install -> finish完成。

Win + R -> cmd 窗口查看一下版本。

# node 版本
node -v

# npm 版本
npm -v

出現(xiàn)版本號正常，則成功。

npm 屬于 nodejs 內(nèi)的工具，安裝完 node 后 npm 會帶上，無需額外單獨安裝。

2) 配置環(huán)境

計算機屬性 -> 高級系統(tǒng)設(shè)置 -> 環(huán)境變量 -> Path

由于 node 使用 npm 命令安裝時默認在 C盤，node后期安裝插件等占據(jù)內(nèi)存很大，所以很不建議默認路徑在C盤。

手動設(shè)置改變路徑，設(shè)置nodejs prefix（全局）與 cache（緩存）路徑。

nodejs安裝目錄下新建文件夾：node_global 和 node_cache

# 查看 prefix 全局
npm get prefix
# 查看 cache 緩存
npm get cache

查出來是在C盤的路徑下。

# 修改 prefix
npm config set prefix "安裝路徑\node_global"
# 修改 cache
npm config set cache "安裝路徑\node_cache"

3) 設(shè)置淘寶鏡像及淘寶cnpm

# 下載鏡像源
# 查看鏡像源
npm config get registry

# 配置
npm config set registry https://registry.npmmirror.com/

npm config set registry https://registry.npm.taobao.org/

完成后再次查看一下鏡像源。

# 安裝cnpm
# 配置一
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 配置二
npm install -g cnpm --registry=https://registry.npmmirror.com

配置一和二都是淘寶提供的 npm 鏡像源。

配置一用于加速npm包的下載，但已被配置二 npmmirror服務(wù) 取代。

配置二是新的 npm鏡像源，更好的服務(wù)穩(wěn)定性和更新速度。推薦使用配置二。

# 查看
cnpm -v

若是安裝完 cnpm 或 執(zhí)行 cnpm命令 出現(xiàn) [不是內(nèi)部或外部命令，也不是可運行的程序]。把當(dāng)前終端窗口關(guān)閉 重新 cmd 打開重新安裝。

注意：如果在 2)配置環(huán)境 或 安裝cnpm 時出現(xiàn)錯誤說：關(guān)于權(quán)限。需要將安裝的nodejs路徑的包提權(quán)。右鍵 -> 屬性 -> 安全 / 編輯 對 Authenticated ... 的權(quán)限。

4) 設(shè)置用戶變量

計算機屬性 -> 高級系統(tǒng)設(shè)置 -> 環(huán)境變量 -> 用戶變量 -> Path 添加 node_global 安裝全路徑。

計算機屬性 -> 高級系統(tǒng)設(shè)置 -> 環(huán)境變量 -> 系統(tǒng)變量 -> 新建：

Path 新建環(huán)境變量添加路徑。

5) 安裝 vue cli

# vue2 腳手架命令
nmp install -g

# vue3 腳手架命令(默認最新)
npm install -g @vue/cli

# vue3 腳手架命令(指定版本)
npm install -g @vue/cli@5.0.8

# 查看版本
vue -V

Win + R -> cmd -> 選擇版本執(zhí)行安裝。

問題一：在 vue 安裝過程中遇到 npm error code ECONNRESET 是網(wǎng)絡(luò)不是很好導(dǎo)致。

問題二：在 vue 安裝過程中遇到 npm error code CERT_HAS_EXPIRED 是因為鏡像源的問題，重新執(zhí)行一下 3) 設(shè)置淘寶鏡像及淘寶cnpm 就可以了。

問題三：如果使用 vue 指令表示 vue 不存在，可以重啟電腦，如果既然不行，計算機屬性 -> 高級系統(tǒng)設(shè)置 -> 環(huán)境變量 -> 用戶變量 / Path 添加：

注意自己的路徑，\AppData\Roaming\npm 是固定的。

2. 創(chuàng)建vue3項目

在本地目錄下，找一個想要存放的路徑。在路徑欄 cmd 進入終端窗口。

# 創(chuàng)建項目
vue create 項目名

 進來后使用 上下左右 方向鍵控制，空格選中，回車下一步。選錯了關(guān)閉重來。

 根據(jù)項目需求選擇配置。

 選好后回車選擇版本。

 yes==歷史路由，瀏覽器 / 連接的路徑。

回車后起個名字即可。

項目創(chuàng)建完成。 進入目錄，運行就可以啟動項目。

瀏覽器可以直接訪問。

使用VScode打開項目 初始的樣子。

啟動項目在終端：

# 啟動
npm run serve

# 打包
npm run build

停止項目運行，Ctrl + C。 

3. 集成 Ant Design Vue UI

Ant Design Vue 是阿里云團隊開源的基于Vue的UI組件。

UI 組件有很多，一類是基于CSS的Bootstrap，適合各種前端框架；一類是基于Vue的UI組件，僅用于Vue框架。

適合Vue的除了Ant Design Vue 還有 ElementUI。Vue3可以使用ElementPlus。

官網(wǎng)：https://antdv.com/components/overview

腳手架與項目都建好了，直接安裝注冊。

在終端輸入命令 

# 安裝
npm i --save ant-design-vue

下載好后會有配置添加。

注冊組件、CSS

全局引入：

問題一：

出現(xiàn)錯誤 Module not found: Error: Can't resolve 'ant-design-vue/es/style/css' in 'E:\Code\StarRail\star_web\src' 是因為官網(wǎng)給的指令 為 import 'ant-design-vue/dist/antd.css'; 與 node_modules 的文件不符。

問題二：

如果沒有 node_modules 包，使用命令下載。

# 下載 node_modules
npm i

npm install

使用 組件

左側(cè)有大量不同組件可以使用。

使用 Ant 的圖標(biāo)是需要 下載導(dǎo)入的。

# 終端
# 下載圖標(biāo)
npm install --save @ant-design/icons-vue

全局引入圖標(biāo)使用：

// 圖標(biāo)導(dǎo)入（全局）
import * as Icons from '@ant-design/icons-vue';

const app = createApp(App);
app.use(Antd).use(store).use(router).mount("#app");

// 引入全局圖標(biāo)
const icons = Icons;
for(const i in icons) {
    app.component(i, icons[i]);
}

使用圖標(biāo)點擊 復(fù)制，粘貼。 

ERROR in [eslint]錯誤。

npm run serve啟動報錯時，可能開啟了嚴格模式。 

lintOnSave: false // 取消嚴格模式