antd Webpack+babel配置

1.ant-design-vue安装

npm i ant-design-vue moment

注意：同时安装多个包，中间用空格分开

2.ant-design-vue使用

在main.js中全局的进行注册使用

import {Button} from "ant-design-vue";
Vue.use(Button);
// vue文件使用模板
<a-button> 按钮</a-button>

3.ant-design-vue优化

①. 按需加载简单优化

导入所需的组件和css样式

import Button from "ant-design-vue/lib/button"
import "ant-design-vue/dist/antd.less"
//或者
import "ant-design-vue/lib/button/style

css样式导入报错提示解决：
webpack项目新建vue.config.js文件

module.exports = {
     css:{
         loaderOptions:{
            less:{
                javascriptEnabled:true
            }
         } 
     }
}

② 使用组件库优化

网站链接：https://ant.design/docs/react/introduce-cn

babel.config.js文件新增

"plugins": [
    ["import", {
      "libraryName": "ant-design-vue",
      "libraryDirectory": "es",
      "style": true // `style: true` 会加载 less 文件
    }]
  ]

插件安装

npm install --save-dev  babel-plugin-import
// 上面不行用淘宝镜像
cnpm install --save-dev  babel-plugin-import

项目重新起动，再修改main.js文件

import {Button} from "ant-design-vue";
Vue.use(Button);

按钮效果