vue3 中脚手架按需引入 ant-design-vue全流程

第一步：创建项目

vue create test_project

第二步：安装 ant-design-vue

yarn add ant-design-vue

第三步：由于 ant-design-vue 使用了 less 样式，所以需要安装 less 和 less-loader，注意版本问题

yarn add -D less less-loader

第四步：安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader 主要作用是支持全局样式变量

yarn add -D style-resources-loader vue-cli-plugin-style-resources-loader

第五步：配置 less-loader 和 style-resources-loader，新增全局样式表，修改根目录 vue.config.js

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/common.less")],
       //./src/assets/common.less 需要自己新建，作为全局样式变量表
    },
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {},
          javascriptEnabled: true,
        },
      },
    },
  },
});

第六步：配置 babel-plugin-import，修改根目录 babel.config.js

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

注意是 style: true，ant官网写的是 style: "css"将只会引入 css 导致样式不完整。