1能颁、nodejs安裝

訪問(wèn)nodejs官網(wǎng)下載zip安裝包，然后將文件內(nèi)容解壓到D:\devtools\目錄中就完成了nodejs及npm的安裝豪硅，安裝目錄為D:\devtools\node-v16.15.0-win-x64。
在環(huán)境變量path中，增加D:\devtools\node-v16.15.0-win-x64和D:\devtools\node-v16.15.0-win-x64\node-global，然后打開(kāi)cmd窗口汹族，執(zhí)行node -v和npm -v命令，如果兩個(gè)命令都輸出node和npm的版本號(hào)其兴，說(shuō)明path配置成功。
在cmd窗口中執(zhí)行以下命令夸政，修改默認(rèn)的nodejs全局模塊安裝路徑及下載依賴包時(shí)使用國(guó)內(nèi)鏡像站點(diǎn)：

npm config set prefix "D:\devtools\node-v16.15.0-win-x64\node-global"
npm config set cache "D:\devtools\node-v16.15.0-win-x64\node-cache"
npm config set registry https://registry.npm.taobao.org

2元旬、配置環(huán)境變量

在系統(tǒng)環(huán)境變量path中增加以下路徑：

D:\devtools\node-v16.15.0-win-x64
D:\devtools\node-v16.15.0-win-x64\node-global

3、創(chuàng)建vite項(xiàng)目

新建一個(gè)文件夾（例如：D:\devtools\jssrc）用于保存vite項(xiàng)目源碼守问，打開(kāi)cmd窗口匀归，執(zhí)行以下命令：

D:
cd D:\devtools\jssrc
npm create vite@latest

根據(jù)提示，輸入項(xiàng)目名稱為firstvite耗帕，選擇框架vue穆端，選擇variant為vue，創(chuàng)建項(xiàng)目完成后仿便，根據(jù)提示体啰，完成vue依賴包安裝及啟動(dòng)開(kāi)發(fā)服務(wù)器。

cd firstvite
npm run dev

系統(tǒng)首頁(yè)

4闻坚、添加ant-design-vue等相關(guān)依賴包

利用vscode打開(kāi)新建項(xiàng)目firstvite下的package.json文件沽翔，在dependencies中添加antd vue、axios等相關(guān)依賴包窿凤，如下所示：

"dependencies": {
    "vue": "^3.2.25",
    "ant-design-vue": "^3.2.7",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0",
    "axios": "^0.27.2",
    "qs": "^6.11.0"
  }

修改firstvite項(xiàng)目的vite.config.js文件內(nèi)容如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js' // 定義vue的別名仅偎，如果使用其他的插件，可能會(huì)用到別名雳殊，該配置同時(shí)解決ant-design-vue中單頁(yè)遞歸生成導(dǎo)航菜單時(shí)會(huì)出現(xiàn)異常的問(wèn)題
    }
  },
  plugins: [vue()],
  server: {
    port: 8090,//前端端口
    proxy: {//反向代理橘沥，通過(guò)axios調(diào)用后端服務(wù)，解決跨域問(wèn)題
      "/api": {
        target: "http://localhost:8081",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    }
  }
})

5夯秃、驗(yàn)證

打開(kāi)vscode終端（如果之前已經(jīng)使用終端啟動(dòng)開(kāi)發(fā)服務(wù)器威恼，在終端使用Ctrl+C組合鍵終止前端服務(wù)）品姓，在D:\devtools\jssrc\firstvite文件夾下運(yùn)行npm run dev命令啟動(dòng)開(kāi)發(fā)服務(wù)。修改main.js文件內(nèi)容如下：

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';//引入ant-design-vue所有組件
import 'ant-design-vue/dist/antd.css';//引入ant-design-vue CSS

createApp(App).use(Antd).mount('#app');//添加use(Antd)

修改App.vue文件（修改前請(qǐng)先備份App.vue文件內(nèi)容）內(nèi)容如下：

<template>
  <a-button type="primary">測(cè)試按鈕</a-button>
</template>

<script setup>

</script>

<style scope>
</style>

打開(kāi)瀏覽器箫措，地址欄輸入http://localhost:8090腹备，如果頁(yè)面出現(xiàn)一個(gè)藍(lán)色按鈕，說(shuō)明ant-design-vue開(kāi)發(fā)環(huán)境搭建成功斤蔓，如下圖所示：

ant-design-vue按鈕

下一篇：Vue3引入vue-router