這兩天看ant-design的文檔，看到定制主題，就想自己也來試試。
首先，我是用的vue-cli 2版本來做的。
一、將項目搭建好
1.創建一個vue項目
vue create antd-demo
2.安裝ant-design-vue
npm install ant-design-vue --save
3.按需引入
這里強調一下，為什么按需引入更好，因為整個antd包其實不小，大部分我們都用不到，全局引入，是很占資源的，所以更推介按需引入。
import Button from 'ant-design-vue/lib/button'; import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加載 css 文件
如果你不熟悉以上的寫法，你可以使用babel，下載一個babel-plugin-import的插件，就可以按照以前的模式引入了。
//下載插件 npm install babel-plugin-import --dev //按需引入（以button為例子） import { Button } from "ant-design-vue" //掛載組件 components:{ AButton : Button }
下載了babel-plugin-import插件，需要配置，才會生效。
在.babelrc文件中配置：
注意：這里的plugins的import中。“style”的配置項本來是”css“，我改為true，是為了后面的主題定制，改為true就可以引入less文件了。
二、下面開始定制主題：
1.在style文件夾下，沒有style自己建一個。新增三個文件：
（1）index.less可以什么都不寫,一般放置公共的樣式。
（2）variable.less
（3）我新建一個theme.js里來定制主題色
3.在build/utils.js文件下修改主題配置：
（1）先引入剛寫好的主題樣式：
（2）配置
其實可以直接在modifyVars里配置顏色，但是把這個單獨拎出來成個文件的好處是，可以配置多個主題，通過js來改變主題色。
好了，到現在，看看效果怎么樣
原本是藍色的按鈕變為紅色了。
像不是組件的，比如字體顏色也跟隨主題變化，可以直接使用theme里的顏色；
這樣子，主題就制定好了。
最后，這只是vue-cli 2的配置方法，還有webpack @4.x的和vue-cli 3的配置方法，可以去antd的官網看，都大同小異。
ps：一些題外話，當你配置less或者sass或者less-loader，sass-loader，有可能出現以下報錯。
這種錯誤一般是版本問題，你下載的依賴版本過高，就容易出現這種錯誤。所以建議，將版本降低。
這僅僅只是我建議的版本。。。