Vite中使用Ant Design Vue3.x框架教程示例
作者:似朝朝我心
这篇文章主要为大家介绍了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框架的资料请关注脚本之家其它相关文章!