antdv如何在vue3.0中使用

這篇文章將為大家詳細(xì)講解有關(guān)antdv如何在vue3.0中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

在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除外）。如果想按需加載請(qǐng)參考 官方文檔。

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庫(kù)，如下寫法

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è)配置后我們可能會(huì)發(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升級(jí)到6.0.0之后，問題也就解決了。

2. 建立一個(gè)單獨(dú)的 less 變量文件，引入這個(gè)文件覆蓋 antd.less 里的變量。

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 樣式入口文件
@import 'your-theme-file.less'; // 用于覆蓋上面定義的變量

關(guān)于antdv如何在vue3.0中使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。