安裝

推薦使用vue-cli安裝

npm install -g @vue/cli

安裝完畢安裝ant-design

npm install -g ant-design-vue

然后就可以使用了

使用

import 'ant-design-vue/dist/antd.css';import Antd from 'ant-design-vue';Vue.use(Antd);

安裝默認如果編譯的話(全部引入)發現最好打包出來的文件會很大，antd以及它的依賴會占用差不多1.7mb大小的空間。所以就需要按需加載。

安裝 babel-plugin-import

npm install --save-dev babel-plugin-import//然后在babel的配置文件里修改， plugins: [ [ "import", {libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css'} ], ],

注意，官方文檔里并沒有后面的style:css，如果你不加這句要額外去安裝less的loader和額外的配置語句。 如果用官方的在vue.config.js里加

loaderOptions: { less: { lessOptions: { javascriptEnabled: true, } } }

然后就可以實現按需加載了。可以正常打包了。后來發現打包出來的文件還是很大。

如圖，特別antd依賴的moment.js把我們不需要的模塊給打包來進來。這個時候就需要在vue.config.js里加入這句。

plugins: [ new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-cn/), ]

這樣一寫，打包完的文件就只剩下中文的語言模塊了。做完這些，感覺還是很大，因為antd默認打包所有icon，應該有500kb這么大，要把它按需加載，但是現在官方是沒有默認方法的(2.0測試版最新支持vue3的已經支持了)，首先在vue.config.js里加入這句

resolve: { alias: { "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js") } }

改變別名引入圖標

//icons.jsexport {default as SettingOutline} from "@ant-design/icons/lib/outline/SettingOutline"export {default as TeamOutline} from "@ant-design/icons/lib/outline/TeamOutline"

寫入你需要的圖標。

再后續使用的時候發現一些組件默認的輸出文字是英文，因為antd有做國際化，而默認用的是英文，所以我要改成默認中文。

//template 包裹應用//scriptimport zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; ... data() { return { locale: zhCN, }

這樣就可以把默認的語言變成中文了。

基本這樣的一番操作,antd就可以正常使用了。

---

往期回顧：

給你代碼：uni-app滾動條問題

vue簡單狀態管理，給你代碼

給你代碼：關于npm的坑

總結

以上是生活随笔為你收集整理的ant design 分页中文字_给你代码：ant-desgin-vue使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。