好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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 - -s ave

vue-ui安装方式

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

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

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

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

导入Element-UI相关资 源

import Vue  From  'vue';
//引入element
import ElementUI f rom  '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+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的样式修改和扩展实例

总结

以上是 为你收集整理的 Element-ui/Element-plus Vue报错问题及解决 全部内容,希望文章能够帮你解决 Element-ui/Element-plus Vue报错问题及解决 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于Element-ui/Element-plus Vue报错问题及解决的详细内容...

  阅读:121次