antd design vue项目按需加载和修改主题颜色

安装babel-plugin-import 按需加载模块

npm i babel-plugin-import -D

修改babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    ['import',{
      'libraryName':'ant-design-vue',
      'libraryDirectory':'es',
      'style':true //css
    }]
  ]
}

修改主题颜色

第一种方法:根目录下添加Vue.config.js文件

安装 less-loader@5.0.0 less@^2.7.3

module.exports = {
    css: {
      loaderOptions: {
        less: {
            modifyVars: {
              'primary-color': '#1DA57A',
              'link-color': '#1DA57A',
              'border-radius-base': '2px',
            },
            javascriptEnabled: true
        },
      },
    },
  };

第二种:
在引入antd.less样式之后 重新定义一个less文件 定义里面的变量 覆盖默认样式