Vite中使用Ant?Design?Vue3.x框架教程示例
更新時間：2022年06月24日 14:16:53 作者：似朝朝我心
這篇文章主要為大家介紹了Vite中使用Ant?Design?Vue3.x框架教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
引言
官網(wǎng):
https://www.antdv.com/docs/vue/introduce-cn
文檔選擇vue3版本，也是官網(wǎng)當(dāng)前推薦的
安裝 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之前
按需引入
官網(wǎng)沒怎么寫，估計很多人比較懵
首先將main.js中全局引入的注釋掉
安裝按需引入插件
npm i unplugin-vue-components -D
打開vite.config.js進(jìn)行配置
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來進(jìn)行按需加載。但是此插件無法處理非組件模塊，如 message，這種組件需要手動加載：
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';以上就是Vite中使用Ant Design Vue3.x框架教程示例的詳細(xì)內(nèi)容，更多關(guān)于Vite使用Ant Design Vue3.x框架的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router，這篇文章主要介紹了Vue?cli及Vue?router詳解,需要的朋友可以參考下2022-08-08
vue修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在開發(fā)Web應(yīng)用程序時，常常需要進(jìn)行登錄驗證和權(quán)限管理，本文主要介紹了vue登錄路由權(quán)限管理的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了淺談Vue.set實際上是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本篇文章給大家詳細(xì)介紹了vue跨域處理問題的方式以及相關(guān)知識點介紹，對此有興趣的朋友學(xué)習(xí)下。2018-02-02
Vue是一款流行的前端開發(fā)框架,它的響應(yīng)式數(shù)據(jù)綁定和組件化特性使得它成為了可視化界面設(shè)計的一個理想選擇,本文將介紹如何使用Vue實現(xiàn)可視化界面設(shè)計,并且演示一個基于Vue的可視化界面設(shè)計案例,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
組件封裝是為了復(fù)用,換成大白話就是,同樣的事情我不想做第二遍,節(jié)省出來的時間用來看動漫不香嗎,下面這篇文章主要給大家介紹了關(guān)于vue封裝TabBar組件的完整步驟,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue如何調(diào)用接口請求頭增加參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01