关于vue3:Vue3使用-Ant-Design-Vue

一.引入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'}]
    ]

残缺代码

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

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据