Vue3使用|Vue3使用 Ant Design Vue Vue3使用AntDesignVue

一.引入Ant Design Vue
vue 项目请自行创建
1.项目添加
npm i --save ant-design-vue@next -S
2.main.js 添加 ant-design-vue 组件

import { createApp } from 'vue' import Antd from 'ant-design-vue'; import App from './App.vue' import router from './router' import store from './store' import 'ant-design-vue/dist/antd.css'; import './index.css'// 本教程采用的是全局引入组件库createApp(App).use(router).use(store).use(Antd).mount('#app')

二.遇到问题
问题1:Error: Cannot find module 'babel-plugin-import'
提示找不到 babel-plugin-import
解决:添加babel-plugin-import
npm install babel-plugin-import --save
问题2:项目运行没有报错,但是不显示内容,打开调试报错:

Uncaught ReferenceError: Antd is not defined at eval (main.ts?bc82:8) at Module../src/main.ts (app.js:1206) at __webpack_require__ (app.js:854) at fn (app.js:151) at Object.1 (app.js:1279) at __webpack_require__ (app.js:854) at checkDeferredModules (app.js:46) at app.js:994 at app.js:997

解决方式:
babel.config.js 添加

plugins: [ ['import', {libraryName: 'ANtd', libraryDirectory: 'es', style: 'css'}] ]

【Vue3使用|Vue3使用 Ant Design Vue】完整代码

module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ ['import', {libraryName: 'ANtd', libraryDirectory: 'es', style: 'css'}] ] };