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 less-loader@7.0.0。重新启动发现下面这个错误：
less.PNG
缺少 less, 那安装一下
npm install less 。报了下面错误：
less2.PNG
顺着注释的 github 地址查过去，发现了解决办法：
solve.PNG
输入命令
npm install less@2.7.3重启，解决！
