环境需要:pnpm、node、等;
1、执行命令
pnpm create vite user-manager-project --template vue-ts
终端显示:
a1@aXingMBP Vue实战文件夹 % pnpm create vite user-manager-project --template vue-tsLibrary/pnpm/store/v3/tmp/dlx-53233 | +1 +
Library/pnpm/store/v3/tmp/dlx-53233 | Progress: resolved1, reused 0, downloaded 1, added 1, done
Scaffolding project in /Users/a1/Documents/Vue实战文件夹/user-manager-project...
Done. Now run:
cd user-manager-project
pnpm install
pnpm run dev
a1@aXingMBP Vue实战文件夹 %
2、引入 ant-design-vue
![](https://img.haomeiwen.com/i4270255/5d4117219046ed7c.png)
2.1 安装antDesign项目下执行命令: pnpm i --save ant-design-vue@4.x
2.2 安装必要的库(axios、vue-router等):pnpm add axios vue-router
3、全局完整注册
import{createApp}from'vue';
importAntdfrom'ant-design-vue';
importAppfrom'./App';
import'ant-design-vue/dist/reset.css';
constapp=createApp(App);
app.use(Antd).mount('#app');
4、修改vite.config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
port: 3009,
open: true,
proxy :{
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
网友评论