初始化antdv项目，按需引入

初始化一个vue3+ts+antdv的项目
可以根据需求另外自行安装pinia和vue-routert

推荐使用bulma，一个类似bootstrap的第三方css框架，非常简洁，没有带任何js相关的东西，只专注样式，提高开发效率

1、创建项目

npm create vite@latest
//回车后输入项目名，按照提示操作，不知道看vite官网
1
2

2、 按需引入antdv组件库

参考： https://antdv.com/docs/vue/introduce-cn 【参考按需引入部分】

安装插件

npm install unplugin-vue-components -D
1

vite.config.ts中配置，一定要设置importStyle，否则会报错

// vite.config.ts
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16