- 使用版本
- vite:2.0
- ant-design-vue: 2.0.0-rc.8
- vue:3.0.5
- 安装vite插件
yarn add vite-plugin-style-import -D
or
npm i vite-plugin-style-import -D
- vite.config.js配置
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
/**
* @type {import('vite').UserConfig}
*/
export default {
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/css`;
},
}]
})
]
}
- 测试运行
- main.js
import { createApp } from 'vue'
import App from './App.vue'
import { Input } from 'ant-design-vue' // 引入 Input 组件
const app=createApp(App)
app.use(Input) // 调用组件
app.mount('#app')
- 组件中使用
<template>
<!-- script-setup内引入使用，不需注册-->
<Button type="primary"> Primary</Button>
<!-- 在mian.js使用use注册组件 -->
<a-input placeholder="Basic usage" />
</template>
<script setup>
import { Button } from "ant-design-vue";
</script>
- 把需要引入的ant组件，整合到一个单独文件中，按需加载
- 新建一个JS文件，示例：在src目录下新建index.js：
// 按需引入组件
import {Button, Input, Layout, Menu} from 'ant-design-vue'
const components = [
Button,
Input,
Layout,
Menu
]
export function setupAntd(app) {
components.forEach(component => {
app.use(component)
})
}
- 修改 main.js
import {createApp} from 'vue'
import App from './App.vue'
// import {Button} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import {router} from './router'
import store from "./store";
import {setupAntd} from "./index"; // 引用ant组件文件 index.js
const app = createApp(App);
// app.use(Button);
app.use(router);
app.use(store);
setupAntd(app); // 调用组件
app.mount('#app');
-
显示界面
图片.png
