[vue3] vue脚手架按需引入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

yarn add -D babel-plugin-import

第五步：配置 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导致样式不完整。

结束：启动试试。