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)
}

总结

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

相关文章

  • vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令)

    vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令)

    这篇文章主要介绍了vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue-element-admin按钮级权限管控的实现

    vue-element-admin按钮级权限管控的实现

    开发离不开权限,不同的用户登录,根据不同的权限,可以访问不同的管理目录,本文主要介绍了vue-element-admin按钮级权限管控的实现,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • 如何正确理解vue中的key详解

    如何正确理解vue中的key详解

    这篇文章主要给大家介绍了关于如何正确理解vue中key的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • vue3获取url地址参数的示例详解

    vue3获取url地址参数的示例详解

    这篇文章主要介绍了vue3获取url地址参数,Vue3 获取地址栏参数有两个方式:查询参数和路径参数,文中结合示例代码给大家详细讲解,需要的朋友可以参考下
    2023-04-04
  • webpack vue项目开发环境局域网访问方法

    webpack vue项目开发环境局域网访问方法

    下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧
    2018-03-03
  • vue.js父子组件通信动态绑定的实例

    vue.js父子组件通信动态绑定的实例

    今天小编就为大家分享一篇vue.js父子组件通信动态绑定的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue.js实现表格渲染的方法

    Vue.js实现表格渲染的方法

    今天小编就为大家分享一篇对Vue.js实现表格渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中为什么在组件内部data是一个函数而不是一个对象

    vue中为什么在组件内部data是一个函数而不是一个对象

    这篇文章主要介绍了vue中为什么在组件内部data是一个函数而不是一个对象,本文通过示例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 一篇文章带你了解vue路由

    一篇文章带你了解vue路由

    这篇文章主要为大家详细介绍了vue的路由,路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源,本文具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Windows系统下使用nginx部署vue2项目的全过程

    Windows系统下使用nginx部署vue2项目的全过程

    nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下
    2023-03-03

最新评论