vue3 + vite3 では、ant design vue オンデマンドが導入され、テーマがカスタマイズされます

1. vite でビルドした vue3 プロジェクトに ant-design-vue をインストールします

npm i ant-design-vue -S

2. インストールを減らす (アリデザインのスタイルが少ないため)

npm i less -D

 3. unplugin-vue-components をインストールして、ant design vue をオンデマンドで導入します

npm i unplugin-vue-components -D

 4. 次に、次のようvite.config.jsに設定します。

/*
 * @Author: chuxiuli [email protected]
 * @Date: 2023-02-16 15:58:03
 * @LastEditors: chuxiuli [email protected]
 * @LastEditTime: 2023-02-17 16:30:50
 * @FilePath: \chizhou-ts-economyd:\project\vite\vite-project\vite.config.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less', // 一定要开启这个配置项
        }),
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: { // 在这里自定义主题色等样式
          'primary-color': '#1da57a',
          'link-color': '#1da57a',
          'border-radius-base': '2px',
        },
        javascriptEnabled: true,
      },
    },
  },
})

5. スタイルファイルを導入してテーマカラーをカスタマイズする 

在vite.config.js修改：
AntDesignVueResolver({ importStyle: "false" })]

次に、app.vueこのグローバル スタイル ファイルを次の場所に導入します。 

<style lang="less">
@import "./assets/global.less";
</style>

次のような新しいスタイル ファイルを作成しますglobal.less。 

@import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
// 以下下内容用于覆盖上面定义的变量
@primary-color: #1da57a; // 自定义全局主色
@link-color: #535bf2; // 自定义链接色