共计 1017 个字符,预计需要花费 3 分钟才能阅读完成。
一. 引入 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-importnpm 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'}]
]
};
正文完