我要评论这篇主要是解决在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)
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论