vue3引入ant-design-vue

最新推荐文章于 2025-11-09 07:27:45 发布

原创最新推荐文章于 2025-11-09 07:27:45 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #es

vue3 专栏收录该内容

6 篇文章

订阅专栏

本文档详述了在使用ant-design-vue 2.x版本与less 2.7.3配合时遇到的bezierEasingMixin()报错，提供了按需加载的解决方案，适合vue3.0开发者参考。

1、遇到的问题

版本汇总，以下代码是package.json文件

ant-design-vue的版本2.x，配合的less是2.7.3.当less版本过高会报错.bezierEasingMixin()，遇到这种情况可以查看vue3.0 使用ant-design-vue 按需加载时报错.bezierEasingMixin()_与BUG战斗的小绵羊的博客-优快云博客

{
  "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的引入

一定要参考官网的说法，我们按需引入

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");

第四步：使用，拷贝官网代码即可