乐趣区

关于前端:antdesignvue的基本使用按需导入组件和主题定制

jiezi

引言

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

退出移动版