Vite中使用Ant Design Vue3.x框架教程示例

更新时间：2022年06月24日 14:16:53 作者：似朝朝我心

这篇文章主要为大家介绍了Vite中使用Ant Design Vue3.x框架教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

官网:

https://www.antdv.com/docs/vue/introduce-cn

文档选择vue3版本，也是官网当前推荐的

安装 ant-design-vue

npm i --save ant-design-vue

main.js引入，全局使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App)
.use(Antd)
.use(router)
.use(store)
.mount('#app') //use必须要在mount之前

按需引入

官网没怎么写，估计很多人比较懵

首先将main.js中全局引入的注释掉

安装按需引入插件

npm i unplugin-vue-components -D

打开vite.config.js进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {
  AntDesignVueResolver,
} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      Components({
        resolvers: [
          AntDesignVueResolver(),
        ],
      })
    ],
})

注意：使用的 Vite，你可以使用unplugin-vue-components来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：

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

以上就是Vite中使用Ant Design Vue3.x框架教程示例的详细内容，更多关于Vite使用Ant Design Vue3.x框架的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue项目运行超详细图解
这篇文章主要给大家介绍了关于vue项目运行的相关资料,文中通过图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
Vue组件中使用防抖和节流实例分析
在本篇文章里小编给大家整理的是一篇关于Vue组件中使用防抖和节流实例分析内容，有需要的朋友们可以学习参考下。
2021-11-11
vue计算属性computed的使用方法示例
这篇文章主要介绍了vue计算属性computed的使用方法,结合实例形式分析了vue计算属性computed的基本用法及相关操作注意事项,需要的朋友可以参考下
2019-03-03
详解Vue中添加过渡效果
本篇文章主要介绍了详解Vue中添加过渡效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
vue实现图形验证码
这篇文章主要为大家详细介绍了vue实现图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
Vue中computed和watch有哪些区别
这篇文章主要介绍了Vue中computed和watch有哪些区别，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
Element-UI清空表单及验证不生效的问题解决
本文主要介绍了Element-UI清空表单及验证不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08
前端H5微信支付宝支付实现方法(uniapp为例)
最近上线一个项目,手机网站进行调起支付宝App支付,做起来还是满顺手的,在此做个记录,这篇文章主要给大家介绍了关于前端H5微信支付宝支付实现方法的相关资料,需要的朋友可以参考下
2024-04-04
vue中$refs的三种用法解读
这篇文章主要介绍了vue中$refs的三种用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue复制内容到剪切板代码实现
这篇文章主要给大家介绍了关于vue复制内容到剪切板代码实现的相关资料,在Web应用程序中剪贴板(Clipboard)操作是非常常见的操作之一,需要的朋友可以参考下
2023-08-08