如何在vue3.0中友好的使用antdv
文章目錄
- 如何在vue3.0中友好的使用antdv
- 在vue3.0中引入我們的antdv
- 在專案中使用圖示（icon）
- 在專案中定制主題（遇坑）
隨著我們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嘗試，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/244684.html
標籤：其他
上一篇：javasrcipt中apply，call與bind的區別？手寫一個bind？
下一篇：2021/1/3-每日三題第10彈：雨停了天晴了，你又覺得你行了？你知道漸進增強和優雅降級之間有什么不同嗎？？？