VUE中添加elementUI

最新推荐文章于 2023-03-15 18:00:00 发布
最新推荐文章于 2023-03-15 18:00:00 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： VUE 文章标签： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaynerain/article/details/119150460
版权

安装

npm install element-ui --save

main.js中添加引用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

目前（2021.4.20）elementUI还不持支Vue3，如果选择创建使用的Vue3需要更换成Vue2

报错信息如下

Uncaught TypeError: Cannot read property 'prototype' of undefined

    at eval (dom.js?5924:19)

    at Object../node_modules/element-ui/lib/utils/dom.js (chunk-vendors.js:2673)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (popup-manager.js?4b26:9)

    at Object../node_modules/element-ui/lib/utils/popup/popup-manager.js (chunk-vendors.js:2721)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (index.js?5128:14)

    at Object../node_modules/element-ui/lib/utils/popup/index.js (chunk-vendors.js:2709)

eval @ dom.js?5924:19

./node_modules/element-ui/lib/utils/dom.js @ chunk-vendors.js:2673

__webpack_require__ @ app.js:854

fn @ app.js:151

eval @ popup-manager.js?4b26:9

./node_modules/element-ui/lib/utils/popup/popup-manager.js @ chunk-vendors.js:2721

__webpack_require__ @ app.js:854

fn @ app.js:151

eval @ index.js?5128:14

./node_modules/element-ui/lib/utils/popup/index.js @ chunk-vendors.js:2709

__webpack_require__ @ app.js:854

fn @ app.js:151

eval @ vue-popper.js?e974:9

./node_modules/element-ui/lib/utils/vue-popper.js @ chunk-vendors.js:2817

__webpack_require__ @ app.js:854

fn @ app.js:151

5 @ select.js?4e4b:523

__webpack_require__ @ select.js?4e4b:21

61 @ select.js?4e4b:1053

__webpack_require__ @ select.js?4e4b:21

eval @ select.js?4e4b:85

eval @ select.js?4e4b:88

./node_modules/element-ui/lib/select.js @ chunk-vendors.js:2522

__webpack_require__ @ app.js:854

fn @ app.js:151

eval @ element-ui.common.js?5c96:308

__webpack_require__ @ element-ui.common.js?5c96:21

eval @ element-ui.common.js?5c96:735

__webpack_require__ @ element-ui.common.js?5c96:21

eval @ element-ui.common.js?5c96:362

__webpack_require__ @ element-ui.common.js?5c96:21

eval @ element-ui.common.js?5c96:85

eval @ element-ui.common.js?5c96:88

./node_modules/element-ui/lib/element-ui.common.js @ chunk-vendors.js:2350

__webpack_require__ @ app.js:854

fn @ app.js:151

eval @ main.js:14

./src/main.js @ app.js:1217

__webpack_require__ @ app.js:854

fn @ app.js:151

1 @ app.js:1290

__webpack_require__ @ app.js:854

checkDeferredModules @ app.js:46

(匿名) @ app.js:994

(匿名) @ app.js:997

再显示15 个框架

sockjs.js?9be2:1609 GET http://192.168.1.41:8080/sockjs-node/info?t=1618890115542 net::ERR_CONNECTION_REFUSED

AbstractXHRObject._start @ sockjs.js?9be2:1609

eval @ sockjs.js?9be2:1498

setTimeout(异步)

AbstractXHRObject @ sockjs.js?9be2:1497

XHRCorsObject @ sockjs.js?9be2:2875

InfoAjax @ sockjs.js?9be2:356

InfoReceiver._getReceiver @ sockjs.js?9be2:539

InfoReceiver.doXhr @ sockjs.js?9be2:556

eval @ sockjs.js?9be2:525

setTimeout(异步)

InfoReceiver @ sockjs.js?9be2:524

SockJS @ sockjs.js?9be2:734

SockJSClient @ SockJSClient.js?0a33:43

initSocket @ socket.js?e29c:20

eval @ socket.js?e29c:39

setTimeout(异步)

eval @ socket.js?e29c:38

EventTarget.dispatchEvent @ sockjs.js?9be2:170

eval @ sockjs.js?9be2:973

setTimeout(异步)

SockJS._close @ sockjs.js?9be2:961

SockJS._transportMessage @ sockjs.js?9be2:901

EventEmitter.emit @ sockjs.js?9be2:86

WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965

sockjs.js?9be2:1609 GET http://192.168.1.41:8080/sockjs-node/info?t=1618890119597 net::ERR_CONNECTION_REFUSED

AbstractXHRObject._start @ sockjs.js?9be2:1609

eval @ sockjs.js?9be2:1498

setTimeout(异步)

AbstractXHRObject @ sockjs.js?9be2:1497

XHRCorsObject @ sockjs.js?9be2:2875

InfoAjax @ sockjs.js?9be2:356

InfoReceiver._getReceiver @ sockjs.js?9be2:539

InfoReceiver.doXhr @ sockjs.js?9be2:556

eval @ sockjs.js?9be2:525

setTimeout(异步)

InfoReceiver @ sockjs.js?9be2:524

SockJS @ sockjs.js?9be2:734

SockJSClient @ SockJSClient.js?0a33:43

initSocket @ socket.js?e29c:20

eval @ socket.js?e29c:39

setTimeout(异步)

eval @ socket.js?e29c:38

EventTarget.dispatchEvent @ sockjs.js?9be2:170

eval @ sockjs.js?9be2:973

setTimeout(异步)

SockJS._close @ sockjs.js?9be2:961

SockJS._receiveInfo @ sockjs.js?9be2:790

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

eval @ sockjs.js?9be2:567

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

eval @ sockjs.js?9be2:374

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

xhr.onreadystatechange @ sockjs.js?9be2:1601

XMLHttpRequest.send(异步)

AbstractXHRObject._start @ sockjs.js?9be2:1609

eval @ sockjs.js?9be2:1498

setTimeout(异步)

AbstractXHRObject @ sockjs.js?9be2:1497

XHRCorsObject @ sockjs.js?9be2:2875

InfoAjax @ sockjs.js?9be2:356

InfoReceiver._getReceiver @ sockjs.js?9be2:539

InfoReceiver.doXhr @ sockjs.js?9be2:556

eval @ sockjs.js?9be2:525

setTimeout(异步)

InfoReceiver @ sockjs.js?9be2:524

SockJS @ sockjs.js?9be2:734

SockJSClient @ SockJSClient.js?0a33:43

initSocket @ socket.js?e29c:20

eval @ socket.js?e29c:39

setTimeout(异步)

eval @ socket.js?e29c:38

EventTarget.dispatchEvent @ sockjs.js?9be2:170

eval @ sockjs.js?9be2:973

setTimeout(异步)

SockJS._close @ sockjs.js?9be2:961

SockJS._transportMessage @ sockjs.js?9be2:901

EventEmitter.emit @ sockjs.js?9be2:86

WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965

sockjs.js?9be2:1609 GET http://192.168.1.41:8080/sockjs-node/info?t=1618890125655 net::ERR_CONNECTION_REFUSED

AbstractXHRObject._start @ sockjs.js?9be2:1609

eval @ sockjs.js?9be2:1498

setTimeout(异步)

AbstractXHRObject @ sockjs.js?9be2:1497

XHRCorsObject @ sockjs.js?9be2:2875

InfoAjax @ sockjs.js?9be2:356

InfoReceiver._getReceiver @ sockjs.js?9be2:539

InfoReceiver.doXhr @ sockjs.js?9be2:556

eval @ sockjs.js?9be2:525

setTimeout(异步)

InfoReceiver @ sockjs.js?9be2:524

SockJS @ sockjs.js?9be2:734

SockJSClient @ SockJSClient.js?0a33:43

initSocket @ socket.js?e29c:20

eval @ socket.js?e29c:39

setTimeout(异步)

eval @ socket.js?e29c:38

EventTarget.dispatchEvent @ sockjs.js?9be2:170

eval @ sockjs.js?9be2:973

setTimeout(异步)

SockJS._close @ sockjs.js?9be2:961

SockJS._receiveInfo @ sockjs.js?9be2:790

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

eval @ sockjs.js?9be2:567

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

eval @ sockjs.js?9be2:374

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

xhr.onreadystatechange @ sockjs.js?9be2:1601

XMLHttpRequest.send(异步)

AbstractXHRObject._start @ sockjs.js?9be2:1609

eval @ sockjs.js?9be2:1498

setTimeout(异步)

AbstractXHRObject @ sockjs.js?9be2:1497

XHRCorsObject @ sockjs.js?9be2:2875

InfoAjax @ sockjs.js?9be2:356

InfoReceiver._getReceiver @ sockjs.js?9be2:539

InfoReceiver.doXhr @ sockjs.js?9be2:556

eval @ sockjs.js?9be2:525

setTimeout(异步)

InfoReceiver @ sockjs.js?9be2:524

SockJS @ sockjs.js?9be2:734

SockJSClient @ SockJSClient.js?0a33:43

initSocket @ socket.js?e29c:20

eval @ socket.js?e29c:39

setTimeout(异步)

eval @ socket.js?e29c:38

EventTarget.dispatchEvent @ sockjs.js?9be2:170

eval @ sockjs.js?9be2:973

setTimeout(异步)

SockJS._close @ sockjs.js?9be2:961

SockJS._receiveInfo @ sockjs.js?9be2:790

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

eval @ sockjs.js?9be2:567

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

eval @ sockjs.js?9be2:374

g @ sockjs.js?9be2:66

EventEmitter.emit @ sockjs.js?9be2:86

xhr.onreadystatechange @ sockjs.js?9be2:1601

XMLHttpRequest.send(异步)

AbstractXHRObject._start @ sockjs.js?9be2:1609

eval @ sockjs.js?9be2:1498

setTimeout(异步)

AbstractXHRObject @ sockjs.js?9be2:1497

XHRCorsObject @ sockjs.js?9be2:2875

InfoAjax @ sockjs.js?9be2:356

InfoReceiver._getReceiver @ sockjs.js?9be2:539

InfoReceiver.doXhr @ sockjs.js?9be2:556

eval @ sockjs.js?9be2:525

setTimeout(异步)

InfoReceiver @ sockjs.js?9be2:524

SockJS @ sockjs.js?9be2:734

SockJSClient @ SockJSClient.js?0a33:43

initSocket @ socket.js?e29c:20

eval @ socket.js?e29c:39

setTimeout(异步)

eval @ socket.js?e29c:38

EventTarget.dispatchEvent @ sockjs.js?9be2:170

eval @ sockjs.js?9be2:973

setTimeout(异步)

SockJS._close @ sockjs.js?9be2:961

SockJS._transportMessage @ sockjs.js?9be2:901

EventEmitter.emit @ sockjs.js?9be2:86

WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965

sockjs.js?9be2:1609 GET http://192.168.1.41:8080/sockjs-node/info?t=1618890135677 net::ERR_CONNECTION_REFUSED

shaynerain
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片上传+拖动排序（vue2+elementUI+vuedraggable）
12-24
在本文中，我们将深入探讨如何使用Vue2、ElementUI和vuedraggable库来实现一个功能完善的图片上传和拖动排序系统。这个系统允许用户上传图片，并在上传后通过拖拽来调整图片的顺序，同时支持查看原图和删除图片。 #...
vue2+elementui+electron项目配置
06-06
如果你选择Vue CLI，可以运行`vue create my-app`，然后在创建过程中选择手动配置，添加Vue2和ElementUI。 安装ElementUI时，在项目根目录运行`npm install element-ui --save`，接着在`main.js`文件中引入并注册...
安装element-ui后，运行报错ERROR in ./node_modules/element-ui/lib/element-ui.common.js Module not found: Erro
前端蜗牛君
03-15 3070
ERROR in ./node_modules/element-ui/lib/element-ui.common.js Module not found: Error: Can’t resolve ‘throttle-debounce/debounce’ in “xxx” ERROR in ./node_modules/_element-ui@2.13.2@element-ui/lib/tooltip.js Module not found: Error: Can’t resolve ‘throttle-d
vue 项目中引入Element-UI报错问题
小王_同学的博客
08-28 2514
vue 项目中引入 Element-UI 之后 报错解决方法 刚开始引入 Element-UI 的时候 ， 运行 nom run dev 报以下错误： ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf Module parse failed: Unexpected character '' (1:0...
vue的element-ui问题
摩尔小哥
04-05 540
背景 今天，在学习vue.js中，我引入了element-ui。执行步骤如下： a> vue init webpack-simple element-ui b> cd my-pro（打开生成的vue项目） c> cnpm install（此处用的是国内淘宝镜像） d> 我先用的是webpack-simple 所以要先配置一下style-loader：cnpm instal...
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css)
热门推荐
超悠閒的博客
06-16 1万+
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css Module build failed: ModuleBuildError: Module build failed: TypeError: this.getOptions is not a function) 文章目录Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_mod
vue项目应用element-ui后报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
weixin_45932157的博客
04-15 1765
加入这串就OK了 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' },
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
最新发布
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key...
vue+elementUI实现简单日历功能
10-14
在本文中，我们将探讨如何使用Vue.js框架结合ElementUI库来实现一个简单的日历功能。ElementUI是一个流行的UI组件库，为Vue提供了丰富的界面元素，使得开发过程更加便捷高效。 首先，我们来看HTML部分。在提供的...
Vue项目引入element-ui
初心不改
02-24 315
很简单，前提已建好vue项目。 在该项目下cmd命令行： 1. 安装element-ui npm install element-ui 2. main.js引入 添加下面三行代码： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 成功引入。 ...
安装node.js、vue.js、ElementUI
世间本无路，恒走坦途出
10-21 737
开始创建vue项目，第一步选 Manually select features 手动选择特性，第二步使用空格选择 Balel、Router选项，回车进入下一步，第三步选择2.x这个版本，第四步选择y使用历史路由，第五步选择 In package.json ，第六步选择n不保存当前配置，然后开始等待创建完成即可。，直接下载安装长期维护版，安装一路next，安装目录可以另选自己喜欢的，其他没什么可说的，环境变量安装的时候会自己配好，安装好后，在CMD窗口输入node -v，能够显示版本号即为安装成功。
ElementUI入门及nodejs环境的搭建
qq_62881798的博客
09-25 1395
Vue是一个当下流行的开发框架，它的核心思想是组件化和数据驱动，ElementUI是饿了么推出的基于vue2.0的组件库，提供了丰富的课复用的组件，方便前端的开发。ElementUI官网。另外一个与ElmentUI类似提供基于Vue2.0的组件库是iview。Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
vue 使用 element-ui 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf...
weixin_30572613的博客
07-02 1700
　　在vue项目中引用 element-ui 时，虽然按照 element-ui 的官方文档一步步操作，还是产生了下面的错误 　　 　　 　　解决这个问题的方法，就是在web pack.config.js 文件中进行如下配置： { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader...
ERROR in ./~/_element-ui@1.3.7@element-ui/lib/element-ui.common.js Module not found: Error: Can't re
weixin_34121282的博客
07-11 2850
2019独角兽企业重金招聘Python工程师标准>>> ...
vue配置element-ui问题
weixin_41587194的博客
05-10 6873
在学习vue期间，刚开始配置element-ui时总是遇到各种各样的问题，记录一下解决问题的一些大致思路，方便以后做项目，也希望对别人有所帮助。 1：vue init webpack-simple element-ui 2.cd element-ui（打开生成的vue项目） 3.cnpm install （不用npm是个人习惯，防止产生错误） 4.在这里我用的是webpack-simple...
vue2.0项目引入element-ui
m0_46364358的博客
03-06 153
1.先安装loader模块 cnpm install style-loader -D cnpm install css-loader -D cnpm install file-loader -D 2.安装element-ui cnpm install element-ui --save 3.在webpack.base.conf.js 添加代码： 4.引入Element,打开项目 找到src/main.js目录，添加一下代码 import Element from 'element-ui import 'e
elementUI使用
qq_43183527的博客
07-24 443
1. 安装 cnpm i element-ui -S -S表示 --save 2. 引入element UI的css 和 插件，放入main.js文件中 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3. webpac...
vue中使用elementui的switch
07-25
在Vue中使用Element UI的Switch组件，需要先安装Element UI并导入所需的组件。以下是使用步骤： 1. 安装Element UI： 在项目根目录中打开终端或命令提示符，运行以下命令安装Element UI： ``` npm install element-ui ``` 2. 在Vue项目的入口文件中导入Element UI和样式： 在main.js（或其他入口文件）中添加以下代码： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 在需要使用Switch组件的组件中导入并使用： 在你需要使用Switch的组件中，可以通过以下方式导入并使用Switch组件： ```javascript <template> <div> <el-switch v-model="switchValue" /> </div> </template> <script> export default { data() { return { switchValue: false }; } }; </script> ``` 在上述示例中，我们将Switch组件放置在一个div中，并通过v-model指令与switchValue数据属性进行双向绑定。你可以根据需要修改组件的样式和功能。 记得在使用之前，确保已经正确导入了Element UI和样式，并在Vue实例中注册了Element UI插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值