1、遇到的问题
版本汇总,以下代码是package.json文件
ant-design-vue的版本2.x,配合的less是2.7.3.当less版本过高会报错.bezierEasingMixin(),遇到这种情况可以查看vue3.0 使用ant-design-vue 按需加载时报错.bezierEasingMixin()_与BUG战斗的小绵羊的博客-CSDN博客
{
"name": "vue3-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "2.2.8",
"babel-plugin-import": "^1.13.5",
"core-js": "^3.8.3",
"css-loader": "^6.7.1",
"less": "2.7.3",
"less-loader": "^11.0.0",
"style-loader": "^3.3.1",
"vue": "^3.2.13",
"vue-loader": "^17.0.0",
"vue-router": "4",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
2、ant-design-vue的引入
一定要参考官网的说法,我们按需引入
第一步:yarn add ant-design-vue @2.2.8
第二步:yarn add babel-plugin-import
第三步:按需加载
本代码是main.js入口文件
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import { Button, DatePicker, Layout, Menu } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import "ant-design-vue/lib/button/style";
import "ant-design-vue/lib/date-picker/style/css"; // 加载 CSS
import "ant-design-vue/lib/button/style/css";
import "ant-design-vue/lib/layout/style/css";
import "ant-design-vue/lib/menu/style/css";
const app = createApp(App);
app.use(Button);
app.use(DatePicker);
app.use(Layout);
app.use(Menu);
app.use(router).mount("#app");
第四步:使用,拷贝官网代码即可