vue3.0中友好使用antdv示例詳解

Posted on by

前言

隨著我們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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：