安装

推荐使用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#34;: path.resolve(__dirname, "./src/icons.js")
            }
        }

改变别名引入图标

//icons.js

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

写入你需要的图标。

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

//template 
<a-locale-provider :locale="locale">包裹应用

//script
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
     ...

   data() {
        return {
            locale: zhCN,
        }

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

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

往期回顾：

给你代码：uni-app滚动条问题

vue简单状态管理，给你代码

给你代码：关于npm的坑