如何使用Vite2.x实现ant-design-vue@next组件的按需加载长尾词？

本文共计345个文字，预计阅读时间需要2分钟。

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 或 npm i vite-plugin-style-import -D

3.插件仓库地址：GitHub

4.vite.config.js配置：

javascript import vue from '@vitejs/plugin-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'; /** * @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`; }, }] }) ] }

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组件的方法的文章就介绍到这了,更多相关vite2.x 按需加载内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！