vite按需按需引入ant组件并实现自定义主题

Vite按需引入ant-design-vue 3.X

1.安装ant-design-vue插件

npm i --save ant-design-vue
npm i unplugin-vue-components -D

2.配置vite.config.ts

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: 'less' })]
      // 如果需要自定义主题色，则需要配置importStyle: 'less',并安装less: npm install less --save-dev

    })
  ]
})

3.unplugin-vue-components插件无法处理非组件模块，如 message、Modal、notification、Icon等，这种组件需要手动加载：

//main.ts
import { createApp } from 'vue';
import App from './App';
const app = createApp(App);

import { Modal, message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
import 'ant-design-vue/es/modal/style/css';

app.config.globalProperties.$Modal = Modal;
app.config.globalProperties.$message = message;

使用ant-design-vue的主题色

配置以下内容即可

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: 'less' })]
      // 如果需要自定义主题色，则需要配置importStyle: 'less',并安装less: npm install less --save-dev

    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
        },
        javascriptEnabled: true,
      },
    },
  },
})

需要重启项目，但是会久一点点。。。

但这样的引入会每次都需要重启，效果很不好，因此有另一种方法取引入。

外部引入less文件修改主题色

新建一个style文件夹，在style文件夹下新建一个文件叫my-theme.less

写入以下代码：

@import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件

// 以下下内容用于覆盖上面定义的变量
@primary-color: #1da57a; // 自定义全局主色
@link-color: #535bf2; // 自定义链接色

修改vite.config.ts文件

plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver({ 
	      importStyle: false, //
	  })]
    })
  ],

style文件夹下的my-theme.less文件在App.vue进行引入

<style lang="less">
@import "./style/my-theme.less";
//其他样式代码
</style>

然后重启项目即可。