1、nodejs安装
访问nodejs官网下载zip安装包，然后将文件内容解压到D:\devtools\目录中就完成了nodejs及npm的安装，安装目录为D:\devtools\node-v16.15.0-win-x64。
在环境变量path中，增加D:\devtools\node-v16.15.0-win-x64和D:\devtools\node-v16.15.0-win-x64\node-global，然后打开cmd窗口，执行node -v和npm -v命令，如果两个命令都输出node和npm的版本号，说明path配置成功。
在cmd窗口中执行以下命令，修改默认的nodejs全局模块安装路径及下载依赖包时使用国内镜像站点：
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、配置环境变量
在系统环境变量path中增加以下路径：
D:\devtools\node-v16.15.0-win-x64
D:\devtools\node-v16.15.0-win-x64\node-global
3、创建vite项目
新建一个文件夹（例如：D:\devtools\jssrc）用于保存vite项目源码，打开cmd窗口，执行以下命令：
D:
cd D:\devtools\jssrc
npm create vite@latest
根据提示，输入项目名称为firstvite，选择框架vue，选择variant为vue，创建项目完成后，根据提示，完成vue依赖包安装及启动开发服务器。
cd firstvite
npm run dev
4、添加ant-design-vue等相关依赖包
利用vscode打开新建项目firstvite下的package.json文件，在dependencies中添加antd vue、axios等相关依赖包，如下所示：
"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项目的vite.config.js文件内容如下：
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的别名，如果使用其他的插件，可能会用到别名，该配置同时解决ant-design-vue中单页递归生成导航菜单时会出现异常的问题
}
},
plugins: [vue()],
server: {
port: 8090,//前端端口
proxy: {//反向代理，通过axios调用后端服务，解决跨域问题
"/api": {
target: "http://localhost:8081",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
}
}
})
5、验证
打开vscode终端（如果之前已经使用终端启动开发服务器，在终端使用Ctrl+C组合键终止前端服务），在D:\devtools\jssrc\firstvite文件夹下运行npm run dev命令启动开发服务。修改main.js文件内容如下：
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文件（修改前请先备份App.vue文件内容）内容如下：
<template>
<a-button type="primary">测试按钮</a-button>
</template>
<script setup>
</script>
<style scope>
</style>
打开浏览器，地址栏输入http://localhost:8090，如果页面出现一个蓝色按钮，说明ant-design-vue开发环境搭建成功，如下图所示：
下一篇：Vue3引入vue-router
