Element-ui/Element-plus Vue报错问题及解决

 更新时间:2023年01月21日 09:12:19   作者:小的笔记本  
这篇文章主要介绍了Element-ui/Element-plus Vue报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

这篇主要是解决在Vue3.0版本中遇到的element-ui失效报错的问题

element-ui前端组件

一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库,注意,是Vue2.0

安装文档:https://element.eleme.cn/#/zh-CN/component/installation

这样,问题就来了,在Vue3.0中,element-ui会失效甚至报错

并且官方文档里只有一句话模糊说明

所以,element-plus来了

element-plus前端组件

本文档将帮助你从 Element 2.x 升级至 Element Plus

安装文档:https://element-plus.gitee.io/#/zh-CN/component/installation

npm

npm install element-plus --save

vue-ui安装方式

新版3.x 暂时还不支持ElementUI

如果要在vue-ui界面化中安装依赖

在vue-cli UI中管理项目(通过运行vue ui),可以通过以下方法添加Element插件:

转到“插件”菜单,单击右上角的+ Add plugin按钮,找到vue-cli-plugin-element并安装它。

导入Element-UI相关资源

import Vue from 'vue';
//引入element
import ElementUI from 'element-ui';
//引入element的css
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
//通过use函数调用ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

引入样式资源很重要,很多时候样式出错并不是写错,而是没有样式资源

按需导入

import { ElButton, ElForm, ElInput } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'

export default (app) => {
  locale.use(lang)
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElInput)
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3+elementui plus创建项目的方法

    Vue3+elementui plus创建项目的方法

    这篇文章主要介绍了Vue3+elementui plus创建项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue实现自定义多选与单选的答题功能

    vue实现自定义多选与单选的答题功能

    这篇文章主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令,非常好用,具体实现过程大家跟随脚本之家小编一起看看吧
    2018-07-07
  • 关掉vue插件Vetur格式化的时候自动添加的样式操作

    关掉vue插件Vetur格式化的时候自动添加的样式操作

    这篇文章主要介绍了关掉vue插件Vetur格式化的时候自动添加的样式操作,文章围绕主题展开操作过程,需要的小伙伴可以参考一下,希望对你有所帮助
    2022-05-05
  • vue中Echarts图表宽度没占满的问题

    vue中Echarts图表宽度没占满的问题

    这篇文章主要介绍了vue中Echarts图表宽度没占满的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 关于vue项目中搜索节流的实现代码

    关于vue项目中搜索节流的实现代码

    这篇文章主要介绍了关于vue项目中搜索节流的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue子组件与父组件详细解析

    Vue子组件与父组件详细解析

    这篇文章主要介绍的是Vue子组件与父组件,什么是父组件,什么是子组件很多时候面对这个问题我们都会有所混淆,下面文章我们就来详细介绍,需要的朋友可以参考一下
    2021-10-10
  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • 浅析vue中常见循环遍历指令的使用 v-for

    浅析vue中常见循环遍历指令的使用 v-for

    这篇文章主要介绍了vue中常见循环遍历指令的使用 v-for,包括v-for遍历数组,v-for遍历json对象,本文给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • Vue实现记住账号密码功能的操作过程

    Vue实现记住账号密码功能的操作过程

    这篇文章主要介绍了Vue实现记住账号密码功能,用户登录时若勾选“记住我”功能选项,则将登录名和密码(加密后)存入本地缓存,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中,下面分享我实现的具体步骤,需要的朋友可以参考下
    2022-07-07
  • bmob js-sdk 在vue中的使用教程

    bmob js-sdk 在vue中的使用教程

    将bmob js-sdk放在static目录,然后在index.html页面中已 script 标签的形式引入,就可以在vue中全局使用bmob js-sdk。下面通过本文给大家分享bmob js-sdk 在vue中的使用教程,需要的朋友参考下吧
    2018-01-01

最新评论