vue项目使用element-ui插件的安装使用

最新推荐文章于 2023-10-30 16:15:34 发布
最新推荐文章于 2023-10-30 16:15:34 发布
阅读量939 收藏
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21903407/article/details/115188545
版权
本文档介绍了如何在Vue项目中安装并引入Element-UI插件。首先，在命令行中切换到Vue项目根目录，通过npm安装Element-UI，安装成功后会生成package-lock.json文件。接着，在src/main.js文件中导入并使用Element-UI。最后，在App.vue文件中测试组件，如添加<el-button>，验证Element-UI已成功安装和引用。
摘要由CSDN通过智能技术生成
  • 打开命令行切换到vue项目根目录然后输入：npm i element-ui
  • 安装完成后vue项目根目录下会多这个文件：package-lock.json 说明已经安装了element-ui插件
  • 引入插件 在项目下的src下的main.js添加如下：
    import ElementUI from ‘element-ui’
    import ‘element-ui/lib/theme-chalk/index.css’
    Vue.use(ElementUI);
  • 接下来测试能否使用 在src目录下的App.vue 文件template标签中随便写个组件 如图就代表安装且引用成功了：
		   <el-button type="success">成功按钮</el-button>

在这里插入图片描述

浮尘如梦106
关注
前端开发模块VUE-Element UI学习笔记
旺仔Sec&blog
08-12 3861
基于 Vue 的一套桌面端组件库，提前封装好的 UI 模板，方便开发者快速搭建一个网站前端界面。官网：https://element.eleme.cn/
解决VUE项目使用Element-ui 下拉组件的验证失效问题
01-18
在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 这样也没有问题,但是如果加上multiple属性,也就是可以多选 就会出现下拉框验证时失效问题. 问题现象：...
Element UI组件的安装及使用
钱多多的博客
10-30 7908
按需引入不同于全部引入，不会一上来引入全局的组件和样式，而是看使用了哪些组件，根据使用的组件进行注册，并且只引入这些组件相关的样式。目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。组件库中UI组件丰富，将60多个组件划分了基础类、form类、data类及提示和导航类等，文档描述齐全，使用方便。优点：组件丰富，文档齐全，兼容性也很高，支持主流的浏览器和移动端。借助插件，可以只引入需要的组件，以达到减小项目体积的目的。
elvui显示服务器,魔兽世界怀旧服ElvUI插件
weixin_39627144的博客
08-11 8590
魔兽世界怀旧服ElvUI插件一款深受广大魔兽玩家好评的插件神器。这款插件与其他插件不同，而ELVUI则非常纯净，它只为用户提供魔兽世界界面修改、姓名版修改、单位框架等功能，不会植入任何广告。更为重要的是ElvUI实时更新，满足用户的第一需求。魔兽世界怀旧服ElvUI插件特色美化简洁的界面风格，让你的魔兽界面焕然一新职业专属设定丰富的细节设置，为每个角色定制外观更新即时第一时间修复bug，只需更新，...
npm 下载 element UI报错
qq_35981694的博客
05-11 1376
如图： 是因为我们的npm版本过高导致的 解决方式 在下载命令后面加入 --legacy-peer-deps 如图就可解决问题：
安装element ui
weixin_43972428的博客
09-23 7241
3.原因是英文翻译：npm WARN已弃用core-js@2.6.12: core-js@不再维护，由于问题太多，不建议使用。由于V8引擎的奇想，旧core-js版本的特性检测可能会导致高达100倍的减速，即使什么都没有填充。7.执行npm run serve，在package.json中出现element ui的版本号。1.先在dev控制台输入npm i element-ui --save。6.在dev窗口执行npm i element-ui --save。即需要升级core-js。
VUE3安装element ui 失败的原因及解决方法
liu2004051957的博客
03-26 4616
在VUE3环境下安装element ui 失败的原因及解决方法:element-ui不适配vue3，官方已将vue3版本的更新为element-plus.
vue-i18n结合Element-ui的配置方法
10-16
vue-i18n是一个专门为Vue.js开发的国际化插件，而Element-ui则是一个基于Vue.js的桌面端组件库，两者结合可以为开发多语言界面提供便利。 在文章开始的部分，作者强调了本文内容的参考价值，表明以下将介绍的方法或...
VUE.js+element-ui实现JSON编辑器
02-17
然后，你需要安装Vue.js、Element-UI以及可能需要的其他依赖，如`vue-json-editor`或者`jsoneditor`等JSON编辑器组件，可以使用以下命令安装： ```bash npm install vue element-ui vue-json-editor --save ```...
vue项目中vue-i18n和element-ui国际化开发实现过程
08-27
为了实现国际化，通常我们会使用vue-i18n插件来管理语言包，而element-ui插件自身也提供了语言包。下面我们将详细介绍如何在Vue项目中使用vue-i18n和element-ui实现国际化开发。 首先，我们需要安装vue-i18n和...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
Element-UI作为一款基于Vue.js的UI组件库，为开发者提供了丰富的界面元素，使得在JSP项目中构建美观、响应式的用户界面变得更加便捷。本文将详细探讨如何在JSP环境中集成Vue.js和Element-UI，并利用Vue.js的第三方...
ElementUI完整引入及按需引入项目开发
明知山
07-22 3508
假设我们已经创建了vue项目了 第一步 使用终端安装Element npm i element-ui -S 第二步 在main.js里引入Element // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.c...
【Vue | vue3】Vue2和Vue3中Element-Ui 的安装与使用
【敦厚的曹操】的专栏
03-31 9129
一、找到Vue脚手架项目的文件夹 输入： npm i element-ui -S 二、在脚手架环境中创建项目的components文件夹添加一个组件【EleTest.vue】，把Element-Ui中的组件内容放入 三、App.vue内容 <template> <div> <!-- <School></School> --> <br /> <!-- <Student na
Vue框架项目引入Element UI（安装，简单demo）
文武傲群雄，彳亍定江山
04-12 1451
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element图片.png1：安装node端开...
VUE element UI 搭建
胡汉三
07-06 2013
VUE的环境安装这里就不多说了，我们直接开始element UI的安装。推荐使用开源中国的码云：Gitee - 基于 Git 的代码托管和研发协作平台创建好了过后，在从码云上，把仓库拉取到本地来。 这里在执行之前，要注意一下目录跟项目名称，覆盖到我们本地从git拉取来的就行。当然你也可以先新建好项目过后在上传到git上去。我是一路回车等待完成过后，就可以运行了。 到这里，我们的vue项目就创建起来了，接下来我们开始添加element ui组件 如果安装不成功的同学，可以试试使用cnpm淘宝镜像（
安装 element-ui 时报错的问题解决
q2086155836的博客
09-17 1324
参考博客：https://blog.csdn.net/kalimera/article/details/122383499。在网上搜到了一些对我有用的代码。正常使用官网给的代码。
Element 学习记录之 elementui的安装
majunze123的博客
06-30 3244
vue-cli2 使用elementui配置安装第一步
npm安装element ui出错的问题--版本不匹配
小张的博客
04-12 1055
npm安装element ui报错-版本不匹配导致 npm ERR! peer vue@"^2.5.17" from element-ui@2.15.13
使用npm i element-ui报错
m0_67228124的博客
09-06 1509
我们在允许命令后面加一个--force，将强制 npm 获取远程资源，报错内容就变成了警告，就不会影响项目的运行了。
vue项目引入element-ui
最新发布
11-24
在Vue项目中引入element-ui组件库，需要先安装element-ui，可以使用npm或yarn进行安装。安装命令如下： ```shell npm install element-ui -S ``` 或者 ```shell yarn add element-ui ``` 安装完成后，在main.js中引入element-ui和其样式文件，代码如下： ```javascript import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App) }) ``` 在上述代码中，我们先引入Vue和App组件，然后引入element-ui和其样式文件，最后使用Vue.use()方法注册element-ui插件即可。 引入完成后，我们就可以在Vue组件中使用element-ui的组件了，例如在App.vue中使用Button组件，代码如下： ```vue <template> <div> <el-button>Click me</el-button> </div> </template> <script> export default { name: 'App' } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值