vue按需引入ant-design排坑避坑

1. 命令行安装ant-design-vue包。

npm install ant-design-vue --save

2. 命令行安装babel-plugin-import，为了局部引入。

npm install --save babel-plugin-import

3. 坑1：下载less和less-loader,less-loader版本过高超过6.0后,会报错，可以下载严格版本号的less-loader和less。

npm install less@3.9.0 less-loader@4.1.0 --save-dev

4. 在babel.config.js 添加import插件，自动引入组件对应样式。

module.exports = {
  // ...
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }
    ]
  ]
}

5. 坑2：引入样式时，需要npm安装less-loader去解析，
需手动设置javascriptEnabled。故我们在vue.config.js文件中设置，若是vue cli3，可以自己在根目录下创建一个vue.config.js文件

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

6.使用方法
import {Button} from 'ant-design-vue' 
Vue.use(Button)