vue3.0中友好使用antdv示例詳解
前言
隨著我們vue3.0的出現，我們的ui元件庫也有了一些變化，像我們的舊版的element-ui已經不能在vue3.0中使用了，如果要使用element的話需要使用最新版的element-plus，由於發現它並不太好用，因此我選擇了Ant Design Vue。
如果我們以前經常使用antd的話，我們使用起來這個上手會非常方便。
在vue3.0中引入我們的antdv
1.首先使用我們的vue/cli建立vue3.0專案並使用less
2. 在vue3.0中使用的話我們需要安裝 ant-design-vue@next 版本，安裝完之後，我們只需要在main.js檔案中把antdv引入到全域性（由於博主比較懶，為了省事，並沒有按需載入），這樣我們就可以使用所有的元件了（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);
在專案中使用圖示（icon）
在我們vue3.0中我們使用icon需要在我們使用的地方額外的引入我們的icon庫，如下寫法
import { UserOutlined } from '@ant-design/icons-vue';
由於我們的vue的標籤並不支援駝峰命名法，在我們的template中使用的時候需要，換成短橫線的連線的方式如下：
<user-outlined />
在專案中定製主題（遇坑）
antd 的樣式使用了 Less 作為開發語言，並定義了一系列全域性/元件的樣式變數，你可以根據需求進行相應調整。
我們有兩種方式可以定製主題：一是建立我們的vue.config.js檔案進行配置，二是建立一個less檔案進行變數覆蓋。
建立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);
經過這個配置後我們可能會發現我們的主題並沒有生效。他不報錯也沒有任何提示，這個時候我又去看文件發現自己遺漏了很重要的一條資訊，如下圖：
我們的這個less-loader必須是6.0.0的
但是這個啥時候我看vue/cli中預設下載的是5.0.0的包。因此在把less-loader升級到6.0.0之後，問題也就解決了。
2. 建立一個單獨的 less 變數檔案，引入這個檔案覆蓋 antd.less 裡的變數。
@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 樣式入口檔案 @import 'your-theme-file.less'; // 用於覆蓋上面定義的變數
具體還是參考我們的 官方文件。
按需載入很重要！！！ 但是由於博主很懶。暫時還沒有在vue3.0嘗試。
到此這篇關於vue3.0中友好使用antdv的文章就介紹到這了,更多相關vue3.0使用antdv內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！