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 |
插件倉庫地址：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.測試運行
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內引入使用，不需注冊--> <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 按需加載內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/qq_38494372/article/details/112913555
