ant-design-vue的基本使用：按需导入组件和主题定制

引言

ant-design-vue作为后来者，名声比不上vue组件库的先驱大佬element，但是用多了element，再上手antv时，仍让我眼前一亮，antv在交互设计和api设计上，确实和element有着很大不同，我觉得这种不同是优于element的。

本篇笔记建立在vue2、vue-cli4.0上。

安装

npm install ant-design-vue --save

导入组件

组件库一般都提供有两种导入方式：全局导入和局部导入。

• 全局导入

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

  全局导入会把所有组件都进行注册，这样会导致一些冷门的、项目中完全用不上的组件被打包到线上，所以一般不推荐使用

• 局部导入、按需加载

  我们需要通过vue-cli的babel-plugin-import插件，帮助我们自动导入组件及其样式

  npm install babel-plugin-import --save-dev

  修改 babel.config.js

  // ...
  plugins: [
      [
        'import',
        {
          libraryName: 'ant-design-vue',
          libraryDirectory: 'es',
          style: true
        }
      ]
  ]
  //...

  babel-plugin-import 文档

  最后导入组件

  import Vue from 'vue';
  
  // ...
  import { Button, message } from 'ant-design-vue';
  
  Vue.use(Button);
  
  Vue.prototype.$message = message;

  上面的代码我们注册里三个组件，分别是通过this.$message即可使用的message组件、button组件、button-group组件。

  如果你希望只注册button，不注册button-group组件，可以手动注册组件（与此雷同的还有a-layout等组件）：

  import Vue from 'vue';
  
  // ...
  import { Button } from 'ant-design-vue';
  
  Vue.component(Button.name,Button);
  // Vue.component(Button.Group.name,Button.Group); // 如果想注册button-group，可以这样实现

  完整的组件可参考：组件注册

  完整流程可以参考官方文档 快速上手

定制主题

antv使用Less预处理编写样式，定制主题的方法也是通过修改Less变量实现的。

官网文档说明了webpack、vue-cli2、vue-cli3、以及通过less文件覆盖变量四种方式，我们在这里只记录了最常用的vue-cli3主题定制：

主题定制

vue-cli3中定制主题

在`vue.config.js`文件中，写入以下内容：其中`modifyVars`中写入我们需要覆盖的变量名

```js
// vue.config.js for [email protected]
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            'primary-color': '#1DA57A',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};
```

antv中预设的Less变量非常多，具体可以参考：[默认主题](https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less)

主题定制不生效的原因：主要检查三个地方：
1、局部导入组件时，babel的plugins中的style属性，设置为了css，导致主题变量的less文件没有被导入，解决方法：把style设置为true
2、全部导入组件时，样式文件导入了ant-design-vue/dist/antd.css，同样是主题变量的less文件没有被导入，解决方法：导入ant-design-vue/dist/antd.less
3、less和less-loader版本不对，解决方法：安装less版本为: ^3.13.1，less-loader版本为: ^6.0.0

为什么主题定制需要制定less版本和less-loader版本：

主要是因为antv的主题定制中用到了less的一些高级语法，而less版本迭代后，这些语法发生了变化，antv并没有更近最新的less版本，所以使用主题定制时，项目中的less版本太高，导致antv中的less旧语法失效而报错，具体可以参考issues

issues