如何在vue3.0中友好的使用antdv

如何在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文件進行變量覆蓋。

1. 建立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嘗試。