vue3.0中友好使用antdv示例詳解
前言
隨著我們vue3.0的出現(xiàn),我們的ui組件庫也有了一些變化,像我們的舊版的element-ui已經(jīng)不能在vue3.0中使用了,如果要使用element的話需要使用最新版的element-plus,由于發(fā)現(xiàn)它并不太好用,因此我選擇了Ant Design Vue。
如果我們以前經(jīng)常使用antd的話,我們使用起來這個(gè)上手會非常方便。
在vue3.0中引入我們的antdv
1.首先使用我們的vue/cli創(chuàng)建vue3.0項(xiàng)目并使用less
2. 在vue3.0中使用的話我們需要安裝 ant-design-vue@next 版本,安裝完之后,我們只需要在main.js文件中把a(bǔ)ntdv引入到全局(由于博主比較懶,為了省事,并沒有按需加載),這樣我們就可以使用所有的組件了(icon除外)。如果想按需加載請參考 官方文檔。
import { createApp } from 'vue'; import Antd from 'ant-design-vue'; import App from './App'; import 'ant-design-vue/dist/antd.css'; const app = createApp(); app.config.productionTip = false; app.use(Antd);
在項(xiàng)目中使用圖標(biāo)(icon)
在我們vue3.0中我們使用icon需要在我們使用的地方額外的引入我們的icon庫,如下寫法
import { UserOutlined } from '@ant-design/icons-vue';
由于我們的vue的標(biāo)簽并不支持駝峰命名法,在我們的template中使用的時(shí)候需要,換成短橫線的連接的方式如下:
<user-outlined />
在項(xiàng)目中定制主題(遇坑)
antd 的樣式使用了 Less 作為開發(fā)語言,并定義了一系列全局/組件的樣式變量,你可以根據(jù)需求進(jìn)行相應(yīng)調(diào)整。
我們有兩種方式可以定制主題:一是創(chuàng)建我們的vue.config.js文件進(jìn)行配置,二是創(chuàng)建一個(gè)less文件進(jìn)行變量覆蓋。
創(chuàng)建vue.config.js文件
module.exports = { css: { loaderOptions: { less: { lessOptions: { modifyVars: { 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px', }, javascriptEnabled: true, }, }, }, }, };
并且我們要把main中改為如下
import { createApp } from 'vue'; import Antd from 'ant-design-vue'; import App from './App'; - import 'ant-design-vue/dist/antd.css'; + import 'ant-design-vue/dist/antd.less'; const app = createApp(); app.config.productionTip = false; app.use(Antd);
經(jīng)過這個(gè)配置后我們可能會發(fā)現(xiàn)我們的主題并沒有生效。他不報(bào)錯(cuò)也沒有任何提示,這個(gè)時(shí)候我又去看文檔發(fā)現(xiàn)自己遺漏了很重要的一條信息,如下圖:
我們的這個(gè)less-loader必須是6.0.0的
但是這個(gè)啥時(shí)候我看vue/cli中默認(rèn)下載的是5.0.0的包。因此在把less-loader升級到6.0.0之后,問題也就解決了。
2. 建立一個(gè)單獨(dú)的 less 變量文件,引入這個(gè)文件覆蓋 antd.less 里的變量。
@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 樣式入口文件 @import 'your-theme-file.less'; // 用于覆蓋上面定義的變量
具體還是參考我們的 官方文檔。
按需加載很重要?。?! 但是由于博主很懶。暫時(shí)還沒有在vue3.0嘗試。
到此這篇關(guān)于vue3.0中友好使用antdv的文章就介紹到這了,更多相關(guān)vue3.0使用antdv內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中 el-table每個(gè)單元格包含多個(gè)數(shù)據(jù)項(xiàng)處理
vue項(xiàng)目中,我們需要在el-table中顯示數(shù)組數(shù)據(jù),有的時(shí)候,需要在一個(gè)單元格中顯示多條數(shù)據(jù),如何實(shí)現(xiàn)呢,對vue el-table單元格相關(guān)知識感興趣的朋友一起看看吧2023-11-11淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期
下面小編就為大家?guī)硪黄獪\談Vue.js 1.x 和 2.x 實(shí)例的生命周期。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07Vue OptionsAPI與CompositionAPI的區(qū)別與使用介紹
OptionsAPI和CompositionAPI是Vue.js框架中兩種不同的組件編寫方式,OptionsAPI通過對象字面量定義組件,以屬性分隔不同功能,響應(yīng)式數(shù)據(jù)通過data屬性定義,本文給大家介紹Vue OptionsAPI與CompositionAPI的區(qū)別,感興趣的朋友一起看看吧2024-10-10vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例
這篇文章主要介紹了vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10html中引入Vue.js的cdn實(shí)現(xiàn)簡單的文檔單頁
這篇文章主要為大家介紹了html中引入Vue.js的cdn實(shí)現(xiàn)簡單的文檔單頁示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Vue中代碼傳送(teleport)的實(shí)現(xiàn)
本文主要介紹了Vue中代碼傳送(teleport)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04