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

目录
  • element-ui前端组件
  • element-plus前端组件
  • vue-ui安装方式
  • 总结

这篇主要是解决在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)
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element Plus的el-tree-select组件懒加载+数据回显详解

    目录 一.背景说明 二.使用 1. dom 2.methods 三.回显 总结 一.背景说明 技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

  • Element-Plus el-col、el-row快速布局及使用方法

    目录 前言 一.el-col span push & pull 响应式 offset 二.el-row gutter justify align 总结 前言 拖拉了一晚, 总结了一些Layout布局工具的使用方法. 一.el-col 本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素. 在el-row添加 style="flex-direction: column;" 可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横

  • Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)

    目录 1. Nuxt3的安装 1.1. 安装新建Nuxt3 项目 1.2. Nuxt3的启动使用 1.3. Nuxt3 运行端口 2. element-plus的安装配置 2.1. 演示使用 3. scss安装和全局变量配置 3.1. 使用 3.2. 外部导入使用 3.3. 全局配置使用 4. 拓展:Corepack 自动装载 pnpm 小聊: 本次记录一次使用Nuxt3搭建前端项目的过程,内容包含Nuxt3的安装,基于Vite脚手架(默认)构建的vue3项目,element-plus的安装配置

  • Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

    目录 1.本章目标 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 2.2  接下来,监听跳转的路由链接,实现点击二级菜单列表时,在Main 区域展示不同的内容组件 2.3 各组件代码 1.本章目标 1.1 点击不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 1. 首先应该为 Menu (菜单)启用 vue-router 模式 (路由模式),默认是false Menu 菜单 | El

  • element plus的样式修改和扩展实例

    目录 一.用户故事 二.需求分析 三.需求实现 一.用户故事 我们开发了一个业务组件库.业务组件库是需要基于公司内部的一个UI组件库.而公司的UI组件库又出“基于”element ui的. 公司的UI组件库是对element ui的主题色进行了修改,并且也对于一些组件进行了扩展.可惜的是,由于他们的版本是vu2版本.我们的业务组件库是vue3的element plus的版本. 二.需求分析 实现形式的考虑 续期的扩展 三.需求实现 主题色的改变 组件样式的扩展 element plus对于各种函

  • Vue 报错Error: No PostCSS Config found问题及解决

    Vue 报错Error: No PostCSS Config found问题及解决

    目录 Vue 报错Error: No PostCSS Config found 解决办法 Vue使用中报错处理ERROR Vue常见错误解析 Vue 报错Error: No PostCSS Config found 从git上 clone 下来的代码: npm install 安装依赖以后,启动服务,出现Error: No PostCSS Config found报错: npm run dev 解决办法 在项目根目录下创建postcss.config.js,配置内容如下:即可修复报错问题. mo

  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    目录 一.简单介绍 二.报错现象 三.问题分析 四.问题处理 1.查看 node 版本和 node-sass 版本依赖关系 2.查看 当前 node 版本和 node-sass 版本是否符合依赖关系 3.当前 node 版本和 node-sass 版本符合依赖关系,可能就是 sass-loader 版本过高,卸载 sass-loader 4.尝试安装低版本的  sass-loader 5.运行 vue 工程,顺利通过了 总结 一.简单介绍 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够

  • Vue报错error:0308010C:digital envelope routines::unsupported的解决方法

    目录 发现错误 方法1.打开终端(按健win+R弹出窗口,键盘输入cmd,然后敲回车)并按照说明粘贴这些:(不一定行,本人失败了) 方法2.尝试卸载Node.js 17+版本并重新安装Node.js 16+版本,然后再重新启动 总结 发现错误 出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响. 方法1.打开终端(按健win+R弹出窗口,键盘输入cmd,然后敲回车)并按照说明粘

  • react创建项目启动报错的完美解决方法

    react创建项目启动报错的完美解决方法

    目录 一.预备知识: 二.创建项目步骤: 三.启动项目时可能出现的报错: 四.Todolist项目相关库: 五.GitHub搜索案例相关库: 六.尚硅谷路由案例相关库: 七.UI库案例相关库: 八.redux相关库: 一.预备知识: npm (也可以用yarn,本文以npm为例) npm介绍 全称为Node Package Manager,是随同NodeJS一起安装的包管理工具. 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地

  • Kendo Grid editing 自定义验证报错提示的解决方法

    Kendo Grid editing 自定义验证报错提示的解决方法

    Kendo UI是一个强大的框架用于快速HTML5 UI开发.基于最新的HTML5.CSS3和JavaScript标准. Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件. 今天开始就对项目里使用的kendo控件技巧做记录,有个别错误希望大家不吝指出,谢谢. 首先就是Grid控件编辑是,验证错误时弹出的提示居然是中文加字段名字,如下图.抓狂啊!!请问这样的低级的提示能拿得出手吗? 这样的提示

  • Vue3刷新页面报错404的解决方法

    Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • MySQL5.7 group by新特性报错1055的解决办法

    项目中本来使用的是mysql5.6进行开发,切换到5.7之后,突然发现原来的一些sql运行都报错,错误编码1055,错误信息和sql_mode中的"only_full_group_by"有关,到网上看了原因,说是mysql5.7中only_full_group_by这个模式是默认开启的 解决办法大致有两种: 一:在sql查询语句中不需要group by的字段上使用any_value()函数 当然,这种对于已经开发了不少功能的项目不太合适,毕竟要把原来的sql都给修改一遍 二:修改my.

  • Oracle+Mybatis的foreach insert批量插入报错的快速解决办法

    最近做一个批量导入的需求,将多条记录批量插入数据库中. 解决思路:在程序中封装一个List集合对象,然后把该集合中的实体插入到数据库中,因为项目使用了MyBatis,所以打算使用MyBatis的foreach功能进行批量插入.期间遇到了"SQL 命令未正确结束 "的错误,最终解决,记录下来供以后查阅和学习. 首先,在网上参考了有关Mybatis的foreach insert的资料,具体如下: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach

  • nginx上传文件大小报错500的解决办法

    nginx上传文件大小报错500的解决办法 采用nginx作反向代理,出现了一个诡异的问题,小文件可以提交,大文件会报500内部错误.这个是什么原因导致的呢? 查wiki可知,上传文件大小相关的有三个配置 client_body_buffer_size 配置请求体缓存区大小, 不配的话, client_body_temp_path 设置临时文件存放路径.只有当上传的请求体超出缓存区大小时,才会写到临时文件中 client_max_body_size 设置上传文件的最大值 所以查出来,问题出现的原

  • Yii使用DeleteAll连表删除出现报错问题的解决方法

    本文实例讲述了Yii使用DeleteAll连表删除出现报错问题的解决方法.分享给大家供大家参考,具体如下: 删除数据的时候,经常会遇到连联判断删除数据的条件,今天用Yii 的CDbCriteria生成关连条件.批量删除的时候数据库报错. 页面代码为: $criteria=new CDbCriteria; $criteria->join = ' LEFT JOIN {{positions}} p ON p.zpo_id=t.zpo_id '; $criteria->addCondition(&q

随机推荐