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';
    //引入elementimport ElementUI from 'element-ui';
    //引入element的cssimport 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    //通过use函数调用ElementUIVue.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)}
    

@L_512_9@

总结

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

• vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage样式失效解决
• Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能
• Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)
• Element-Plus el-col、el-row快速布局及使用方法
• Element Plus的el-tree-select组件懒加载+数据回显详解
• element plus的样式修改和扩展实例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！