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