Vue3+CLI4 项目中如何使用Element

文章目录

Vue3+CLI4 项目中如何使用Element
前言
一、解决过程
二、如何引入
- 1.关于引入组件
总结

前言

使用中报错请看第一大节,准备引入请看第二大节.

一、解决过程

在安装了Elementui之后向项目里引入官方的组件,终端警告:
"export default" is (中间这段我忘了) in vue
然后进入页面也是什么都渲染不出,控制台报错:
Uncaught TypeError: Cannot read property ‘prototype‘ of undefined

我去查了一些解决方法,
他们说建议降CLI或者Vue到更低版本,好家伙,我这楼都盖了一大半了你跟我说要换钢筋?

我去Element的官网查了一下,搜索引擎排在前面的是适配Vue2.0的ElementUI官网,但是可以传送到V3版:

我就过去看了一下,然后发现了一个很明显的区别:

适用于Vue3.0的Element应该是Element-plus,我们应该再安装一个ElementPlus

然后我萌生出一个问题:“那安装完之后Element-ui能不能卸掉?”

我试了,可以

ElementUI是专门适用于Vue2.0的,Vue3环境下完全不需要它,伴随着Vue.xxx的引入方式被Vue3.0废弃,依赖这种方式来使用的Element-ui也被淘汰.

卸掉就好了,我之前写的Element组件也没有出现任何问题:

二、如何引入

npm安装element-plus,然后…
main.js中加入:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus).mount('#app')
//样式文件的路径可能会报错,不过问题不大;
//自己去node_modules里找到目标文件路径就好了;
//引入"index.css"是直接引入全部的样式文件，这样做可以避免引入额外的打包工具.

然后这就够了,也不用引入组件,你现在可以直接去复制代码粘进来用了,具体为什么请继续往下看:

1.关于引入组件

我遇到一个奇怪的点,官方文档和很多大佬都说要引入组件,但是我在以前做Vue2项目的时候,包括现在的Vue3项目,用Element都是不引入组件直接粘过代码来就能用的,我不知道这是否合理,但确实是我遇到的情况,就以这次Vue3项目来示例吧:

你可以看到我没有在任何地方引入组件,仅仅是在官方网站的组件库里复制代码和样式到我的文件里,就可以正常使用.
最后更离谱一点我把element.js也注释了,但是还是没有任何影响:

这是我写的一个示例页面,使用了走马灯组件和卡片组件,均未事先引入:

交互,特效,样式,均可正常使用,也没有警告:

总结

好吧,那我就先这样记下来了,我不知道不事先引入有没有什么不好的地方…

如果这样做有什么很大的弊端的话,还恳请您在评论区指导我一下,我会感谢您的.
这篇文章如果为您提供了帮助,我也很荣幸.

Vue3+CLI4 使用Element-ui相关推荐

vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
Vue 安装 Element UI时报错 code ERESOLVE unable to resolve dependency tree
检查当前版本是否为 npm 7.x,7.x对树依赖检查更严格,需要在命令后增加--legacy-peer-deps以规避此报错,在安装其他依赖时如果报错类似也可如此解决,当然也可以将npm降级到6.x ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...
Element UI 应用精讲
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Element UI 应用前言一.Element 快速上手 1.1.Ele ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
Element 官方宣布了：Element UI for Vue 3.0 来了！
Element Plus for Vue 3.0 来了,这次真的来了! Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Eleme ...
Element UI 及 Element Plus框架
一,何为Element UI 及 Element Plus? 它们是前端框架.它是包含很多有自己风格的组件库. Element目前有两个版本:element-ui 及 element-plus两个版本 ...
vue表格显示图片，采用element ui实现
项目场景: vue表格显示图片,采用element ui实现 <template><el-table :data="tableData" style=" ...

Vue3+CLI4 使用Element-ui