vite2.x如何实现按需加载ant-design-vue@next组件的方法

本篇内容介绍了“vite2.x如何实现按需加载ant-design-Vue@next组件的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

vue是什么软件

Vue是一套用于构建用户界面的渐进式javascript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

1.使用版本

• vite:2.0

• ant-design-vue: 2.0.0-rc.8

• vue:3.0.5

2.安装vite插件

yarn add vite-plugin-style-import -D or npm i vite-plugin-style-import -D

插件仓库地址：GitHub

3.vite.config.js配置

import vue from '@vitejs/plugin-vue'import styleImport from 'vite-plugin-style-import';export default { plugins: [  vue(),  styleImport({   libs: [{    libraryName: 'ant-design-vue',    esModule: true,    resolveStyle: (name) => {     return `ant-design-vue/es/${name}/style/CSS`;    },   }]  }) ]}

4.测试运行

main.js

import { createApp } from 'vue'import App from './App.vue'import { Input } from 'ant-design-vue';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>

“vite2.x如何实现按需加载ant-design-vue@next组件的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！