安装

推荐使用vue-cli安装

npm install -g &＃64;vue/cli

安装完毕安装ant-design

npm install -g ant-design-vue

然后就可以使用了

使用

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

安装默认如果编译的话(全部引入)发现最好打包出来的文件会很大&＃xff0c;antd以及它的依赖会占用差不多1.7mb大小的空间。所以就需要按需加载。

安装 babel-plugin-import

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

注意&＃xff0c;官方文档里并没有后面的style:css&＃xff0c;如果你不加这句要额外去安装less的loader和额外的配置语句。 如果用官方的在vue.config.js里加

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

然后就可以实现按需加载了。可以正常打包了。后来发现打包出来的文件还是很大。

如图&＃xff0c;特别antd依赖的moment.js把我们不需要的模块给打包来进来。这个时候就需要在vue.config.js里加入这句。

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

这样一写&＃xff0c;打包完的文件就只剩下中文的语言模块了。做完这些&＃xff0c;感觉还是很大&＃xff0c;因为antd默认打包所有icon&＃xff0c;应该有500kb这么大&＃xff0c;要把它按需加载&＃xff0c;但是现在官方是没有默认方法的(2.0测试版最新支持vue3的已经支持了)&＃xff0c;首先在vue.config.js里加入这句

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

改变别名引入图标

//icons.jsexport {default as SettingOutline} from "&＃64;ant-design/icons/lib/outline/SettingOutline"export {default as TeamOutline} from "&＃64;ant-design/icons/lib/outline/TeamOutline"

写入你需要的图标。

再后续使用的时候发现一些组件默认的输出文字是英文&＃xff0c;因为antd有做国际化&＃xff0c;而默认用的是英文&＃xff0c;所以我要改成默认中文。

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

这样就可以把默认的语言变成中文了。

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

---

往期回顾&＃xff1a;

给你代码&＃xff1a;uni-app滚动条问题

vue简单状态管理&＃xff0c;给你代码

给你代码&＃xff1a;关于npm的坑