ant-design-vue的基本使用：按需导入组件和主题定制Antv还是让我眼前一亮。Antv在交互设计和api设计上确实和element有很大的不同。这个区别我觉得比element好。本笔记基于vue2和vue-cli4.0。安装npminstallant-design-vue--save导入组件组件库一般提供两种导入方式：全局导入和本地导入。全局导入importVuefrom'vue';//...importAntdfrom'ant-design-vue';import'ant-design-vue/dist/antd.css';Vue.use(Antd);//...globalimport会注册所有的组件，会导致一些项目中完全没有用到的冷门组件被打包上线，所以一般不建议使用partialimport，需要通过vue-cli按需加载babel-plugin-import插件帮助我们自动导入组件及其样式npminstallbabel-plugin-import--save-devmodifybabel.config.js//...plugins:[['import',{libraryName:'ant-design-vue',libraryDirectory:'es',style:true}]]//...babel-plugin-import文档最终导入组件importVuefrom'vue';//...import{Button,消息}来自'ant-design-vue';Vue.use(Button);Vue.prototype.$message=message;在上面的代码中，我们注册了三个组件，分别是可以通过this.$message来使用的消息组件、按钮组件、按钮组组件。如果只想注册按钮而不注册button-group组件，可以手动注册组件（类似这个，还有a-layout等组件）：importVuefrom'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主题定制：themecustomizationinvue-cli3customtheme在`vue.config.js`文件中，写入如下内容：其中`modifyVars`写入我们的变量名需要覆盖```js//vue.config.jsforless-loader@6.0.0module.exports={css:{loaderOptions:{less:{lessOptions:{//如果你正在使用less-loader@5请将lessOptions直接展开到optionsmodifyVars:{'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，导致没有少文件导入主题变量，解决方法：将style设置为true2.当所有components导入，style文件导入ant-design-vue/dist/antd.css，同样是主题变量的less文件没有导入。解决方法：important-design-vue/dist/antd.less3、less和less-loader版本不对，解决办法：安装less版本：^3.13.1，less-loader版本：^6.0.0为什么主题定制需要developlessversion和less-loaderversion：主要是用在antv的主题定制中less的一些高级语法，经过less版本的迭代，这些语法都变了，而antv没有最新的less版本，所以在使用主题定制的时候，项目中的less版本太高，导致旧的lessgrammarinantvtofail报错详见issues
