1.使用版本
- vite:2.0
- ant-design-vue: 2.0.0-rc.8
- vue:3.0.5
2.安裝vite插件
|
1
|
yarn add vite-plugin-style-import -D or npm i vite-plugin-style-import -D |
插件倉(cāng)庫(kù)地址：github
3.vite.config.js配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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.測(cè)試運(yùn)行
main.js
|
1
2
3
4
5
6
|
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') |
組件中使用
|
1
2
3
4
5
6
7
8
9
|
<template> <!-- script-setup內(nèi)引入使用，不需注冊(cè)--> <Button type="primary"> Primary</Button> <!-- 在mian.js使用use注冊(cè)組件 --> <a-input placeholder="Basic usage" /></template><script setup>import { Button } from "ant-design-vue";</script> |
到此這篇關(guān)于vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法的文章就介紹到這了,更多相關(guān)vite2.x 按需加載內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/qq_38494372/article/details/112913555
