前言

  在自己的项目开发和学习过程中使用Vue是十分频繁的，所以就把学习的过程写在这里方便查看。另外，还是声明，最好的参考文档一定是官方的文档。下面给两个官方文档的连接，有什么问题可以到里面字寻找。
Vue官方文档
Ant Design of Vue官方文档

实现

其实这个实现还是比较简单的，由于一开始并没有理解官方文档中的意思，所以配置错误导致配置没有生效，现在就直接把这个方法写在这里，下次可以进行参考，首先我的项目是Vue-cli3使用了babel。

只需要改写vue.config.js中的一个css的属性，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    'primary-color': '#FF99CC',
                    'link-color': '#FF99CC',
                    'border-radius-base': '2px',
                },
                javascriptEnabled: true,
            },
        },
    },

这时候应该是没有生效的，需要更改main.js中的import 'ant-design-vue/dist/antd.css'改为这样：

1
import 'ant-design-vue/dist/antd.less'

重新编译，应该就可以实现了。