随手记录一下

main.ts

import { createApp } from 'vue'
import { setupAntd } from './antd-ui'
import App from './App.vue'

const app = createApp(App)
setupAntd(app)
app.mount('#app')

antd-ui.ts

import { Button, Card, message, Breadcrumb } from 'ant-design-vue';

const plugins = [Button, Card, Breadcrumb];

export const setupAntd = (app: any, options = {}) => {
  app.config.globalProperties.$message = message;
  plugins.forEach((plugin) => {
    app.use(plugin);
  });
};

vite.config.ts
安装 3个插件

npm install less less-loader vite-plugin-style-import -D

由于 vite 本身已按需导入了组件库，因此仅样式不是按需导入的，因此只需按需导入样式即可。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          }
        }
      ]
    }),
  ],
  build: {
    // 去除console
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: { // 更改主题在这里
          'primary-color': '#52c41a',
          'link-color': '#1DA57A',
          'border-radius-base': '2px'
        },
        javascriptEnabled: true
      }
    }
  },
  base: './', // 设置打包路径
  server: {
    host: '0.0.0.0',
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    https: false,
    cors: true // 允许跨域

    // 设置代理，根据我们项目实际情况配置
     proxy: {
       '/api': {
         target: 'http://xxx.xxx.xxx.xxx:8000',
        changeOrigin: true,
         secure: false,
         rewrite: (path) => path.replace('/api/', '/')
       }
     }
  }
})

测试一下

<template>
  <div>
    <a-button type="primary" @click="info">1111</a-button>
    <a-breadcrumb>
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
      <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>
<script>
  import { message, notification } from 'ant-design-vue';
  import SideMenu from '../../components/side-menu/side-menu.vue';
  export default {
    setup() {
      const info = () => {
        message.info('This is a normal message');
        notification.info({
          message: 'Notification Title',
          description:
            'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        });
      };
      return {
        info,
      };
    },
    components: {
      SideMenu,
    },
  };
</script>
<style lang="stylus" scoped>
  @import './Main.styl';
</style>

测试按钮效果如下：