introduction

As a latecomer, ant design vue is not as famous as element, the pioneer of vue component library. However, with more elements, I still see it in front of me when I start to use antv. Antv is really very different from element in interaction design and api design. I think this difference is better than element.

This note is based on vue2 and vue-cli4 On 0.

install

npm install ant-design-vue --save

Import components

Component libraries generally provide two import methods: global import and local import.

• Global import

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

  Global import will register all components, which will cause some unpopular components that are completely useless in the project to be packaged online, so it is generally not recommended

• Partial import and on-demand loading

  We need to use Vue cli's Babel plugin import plug-in to help us automatically import components and their styles

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

  Modify Babel config. js

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

  Babel plugin import document

  Finally, import components

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

  In the above code, we register three components through this$ Message can be used as message component, button component and button group component.

  If you want to register only button but not button group components, you can register components manually (the same as a-layout and other components):

  import Vue from 'vue';
  
  // ...
  import { Button } from 'ant-design-vue';
  
  Vue.component(Button.name,Button);
  // Vue.component(Button.Group.name,Button.Group); //  If you want to register a button group, you can do this

  For complete components, refer to: Component registration

  The complete process can refer to the official documents Get started quickly

Custom theme

antv uses Less preprocessing to write styles, and the method of customizing themes is also realized by modifying Less variables.

The official website documents describe four ways: webpack, vue-cli2, vue-cli3, and overwriting variables through less files. Here we only record the most commonly used vue-cli3 theme Customization:

Theme customization

Customized theme in vue-cli3

stay`vue.config.js`In the file, write the following contents:`modifyVars`Write the variable name we need to override in

```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 Preset in Less There are many variables. For details, please refer to:[Default theme](https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less)

Reasons why theme customization does not take effect: there are three main checks:
1. When importing components locally, the style attribute in the plugins of babel is set to css, resulting in the less file of the topic variable not being imported. Solution: set style to true
2. When importing all components, the style file imports Ant Design Vue / dist / antd CSS, which is also the less file of the topic variable, has not been imported. Solution: import ant design Vue / dist / antd less
3. The versions of less and less loader are incorrect. Solution: install less version: ^ 3.13.1 and less loader version: ^ 6.0.0

Why the less version and less loader version are required for theme Customization:

This is mainly because some advanced syntax of less is used in the theme customization of antv. After the iteration of less version, these syntax has changed. Antv does not have the latest less version. Therefore, when using theme customization, the less version in the project is too high, resulting in the failure of the old syntax of less in antv and an error. For details, please refer to issues

issues