vite-vue3-antDesign for vue 的按需引入

栀暖__

已于 2023-04-13 16:02:43 修改

阅读量1.9k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js 前端

于 2023-04-12 11:02:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52229892/article/details/130101735

文章介绍了如何在项目中安装和配置AntDesignVueUI组件库，以及利用unplugin-vue-components进行自动导入。同时，文章提到了非组件模块如message和Modal的处理方法，包括手动引入和全局挂载对象的方式，以便于在各个页面中方便使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.antDesign 官网快速上手 - Ant Design Vue (antdv.com)

安装ui组件库，和按需引入的插件

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

2.配置vite (config.js)

//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from "unplugin-vue-components/vite";
//ant-design-vue
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      //ant-design-vue   importStyle = false 样式就没了
      resolvers: [
        AntDesignVueResolver({ importStyle: "less", resolveIcons: true }),
      ],
    }),
  ],
});

3.main.js（此步省略，按需引入不需要在注册）

//ant-design-vue
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd);

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

//在用到的页面，script里引用组件和对应的样式

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

//使用
message.info('1111111')

5.但是每次都要引入非组件模块都要这样引入样式，我们可以用另一种方式，挂载一个全局对象

在src目录新建一个base.js/ts文件，引入内容 (之后再main.js中引入此文件)

import { Modal, message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
import 'ant-design-vue/es/modal/style/css';
export default{
install(app){
//挂载全局对象
app.config.globalProperties.$message=message
app.config.globalProperties.$Modal=Modal
}
}

6.全局注册

//main.js
import base from './base'

const app=createApp(APP)
//注册使用
app.use(base)


//在某个页面使用的时候
1.import {getCurrentInstance} from 'vue'
  const {proxy}=getCurrentInstance()

2.使用
proxy.$message.info('1111111')