vue3 按需引入 Ant-Design-Vue

1. 起因

想用 vue3 加上 spring-boot 做一个增删改查的小应用用于练习。

2. 经过

使用 vue-cli 创建一个项目, 如下：

cli.PNG

因为以前在 vue 项目里面使用的是 element-ui 组件, 这次想试试 ant-design-vue 组件，去官网查看如何下载，在 vscode 里面打开项目，反手一个命令如下：

npm install ant-design-vue@next --save

官网的按需加载文档是这么说的：

官网.PNG

打开 vue-cli 生成的 babel.config.js 文件，因为选项中询问了（where do you prefer placing config for Babel, Eslint, etc.?）一下，我选的 yes，所以是单独文件，粘贴，复制官网代码：

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

因为初始化时候选的是 Sass/Scss ，所以 style 那里改成 true。
新建一个 AntDesignVue.ts文件专门用于引入 antv 组件，如下：

import { DatePicker, Input } from "ant-design-vue";

export const antArr = [DatePicker, Input];

在 main.ts 引入：

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

import { antArr } from "@/components/AntDesignVue";

// createApp(App).use(store).use(router).use(ant).mount("#app");

const app = createApp(App);
app.use(store);
app.use(router);

for (const item of antArr) {
  app.use(item);
}

app.mount("#app");

反手一个 npm run serve , 报错了...

babel-plugin-import.PNG

那我们安装一下： npm install babel-plugin-import 。
再启动发现报下面错误：

less-loader.PNG

那我们再安装一下： npm install less-loader 。
再启动发现又报错了：

less-loader2.PNG

经过查找发现是 less-loader 版本过高导致的，我们重新安装低版本: npm install [email protected]。
重新启动发现下面这个错误：

less.PNG

缺少 less, 那安装一下 npm install less 。
报了下面错误：

less2.PNG

顺着注释的 github 地址查过去，发现了解决办法：

solve.PNG

输入命令 npm install [email protected]
重启，解决！