vue3 全局引入vant和antd等ui时需要注意的地方

最新推荐文章于 2022-11-28 09:16:54 发布

爱酒的鼠标

最新推荐文章于 2022-11-28 09:16:54 发布

阅读量765

点赞数

本文链接：https://blog.csdn.net/wzh70/article/details/122933029

版权

关键词由CSDN通过智能技术生成

提示：Uncaught ReferenceError: Vant is not defined

1.要注销babel.config.js文件中的 cli-plugin-babel

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

2.在main.js中引入

如果按照官网的来引入：

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
const app = createApp(App);
app.use(router);
app.use(Vant);
app.mount('#app');

但是前台提示：Uncaught ReferenceError: Vant is not defined

而正确的做法为：import Vant from 'vant/es';

import { createApp } from 'vue';
import Vant from 'vant/es';
import 'vant/lib/index.css';
const app = createApp(App);
app.use(router);
app.use(Vant);
app.mount('#app');

具体原因我忘记了！先记录下以后再说