使用vue@3搭配element-ui时页面报错

红太狼 2021-07-25 17:36 1062阅读 0赞

1.  执行`vue add element`后，页面报错

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70_pic_center]

1.  查看代码，此时element.js引用的是vue

import Vue from "vue";
    import Element from "element-ui";
    import "../element-variables.scss";
    
    Vue.use(Element);

1.  终端报错

warning  in ./src/plugins/element.js
    
    "export 'default' (imported as 'Vue') was not found in 'vue'

1.  查看项目文件main.js代码

import {  createApp } from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    import "./plugins/element.js";
    
    createApp(App)
      .use(store)
      .use(router)
      .mount("#app");

1.  目前还没找到解决方案

———————————*2021/04/07更新*——————————————-  
*[Element Plus][]可以支持vue@3*

1.  安装element-plus

npm install element-plus --save

1.  在 `main.js` 中写入以下内容：

import {  createApp } from 'vue'
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    const app = createApp(App)
    app.use(ElementPlus)
    app.mount('#app')

以上代码便完成了 Element Plus 的引入。需要注意的是，样式文件需要单独引入。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/f7aaa76ee9bc47f193898132070d778e.png
[Element Plus]: https://element-plus.org/#/zh-CN/component/quickstart

发表评论取消回复

表情：

评论列表（有 0 条评论，1062人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bug：elementUI样式不起作用、Vue引入组件报错not found等（Vue+ElementUI问题汇总）

前端问题合集：Vue+ElementUI 1. Vue引用Element-UI时，组件无效果解决方案 > 前提： > > 已经安装好elementUI依赖

﹏ヽ暗。殇╰゛Y/ 2024年02月28日 03:04/ 0 赞/ 28 阅读

相关 uniapp+vue3+ts 使用pinia报错

"hasInjectionContext" is not exported by "node\_modules/vue-demi/lib/index.mjs", importe

ゝ一世哀愁。/ 2023年10月13日 16:56/ 0 赞/ 76 阅读

相关 vue3.0 + vite 使用less报错解决方法

使用less报错: [vite] Dep optimization failed with error: Could not load os (impor

川长思鸟来/ 2022年11月01日 00:56/ 0 赞/ 1471 阅读

相关使用jstl标签时MyEclipse报错

使用jstl，新建项目然后编写Jsp页面后引入jstl标签库，在页面中写入jstl标签后运行时会出错 The absolute uri: http://java.su

拼搏现实的明天。/ 2022年08月03日 05:07/ 0 赞/ 161 阅读

相关 vue使用ElementUI时导航栏默认展开

vue使用ElementUI时导航栏默认展开本文主要参考： http://element.eleme.io/\/zh-CN/component/menu 在使

亦凉/ 2022年06月09日 23:37/ 0 赞/ 855 阅读

相关 springboot环境搭配，pom.xml报错问题

很多人都出现了创建springboot项目pom.xml报错的情况 ![20180530183717814][] 复制查看具体错误信息 ![20

小鱼儿/ 2022年05月23日 01:44/ 0 赞/ 184 阅读

相关关于jsp动态引入页面时路径报错

动态引入报错 `<jsp:include page="${pageContext.request.contextPath }/header.jsp"></jsp:incl

Dear 丶/ 2021年11月11日 06:48/ 0 赞/ 401 阅读

相关 Vue.js使用ElementUI

1. 安装ElementUI(目前最新版4.0不支持，请使用3.0.4) npm i element-ui -S 1. main.js中添加代码 `如果不添加这

忘是亡心i/ 2021年10月16日 01:46/ 0 赞/ 436 阅读

相关使用vue@3搭配element-ui时页面报错

1. 执行`vue add element`后，页面报错 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

红太狼/ 2021年07月25日 17:36/ 0 赞/ 1063 阅读

相关 vue报错

vue的采坑之旅 1.vue报错：Error in mounted hook: “TypeError: handler.call is not a function” !

妖狐艹你老母/ 2021年07月25日 01:07/ 0 赞/ 530 阅读