引言

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 less-loader@6.0.0
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