ElementUI学习（2020.12.19）

最新推荐文章于 2024-01-30 22:40:13 发布
最新推荐文章于 2024-01-30 22:40:13 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： 前端学习 文章标签： elementui vue.js intellij idea node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jing_zhong/article/details/111400724
版权

ElementUI 前端

1、ElementUI学习资料

ElementUI官网
Element(Github地址)
在线前端开发运行工具CodePen
在线ElementUI-test运行工具JSRUN.NET

2、ElementUI 简介:A Vue.js 2.0 UI Toolkit for Web.

        Element作为网站快速成型工具，它是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
        ElementUI设计的整体布局如下所示：

顶部导航
侧栏导航
        导航可以解决用户在访问页面时：**在哪里**，**去哪里**，**怎样去**的问题。一般来说，导航栏分为**顶部导航**和**侧栏导航**。

        安装Element可以通过两种方式：npm（推荐使用）和CDN

同时Element中包含很多组件，可以在开发网站布局时进行使用

2.1 Hello World Demo（以CDN方式为例）

        如果采用CDN的方式可以轻松创建一个Hello World页面(本质上就是一个html文件),其中要使用ElementUI库，需要引入以下的element-ui样式库(.css)：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

        如果要涉及到Element UI中一些控件（如Button按钮、Dialog对话框等）的事件处理（如Click点击等），则需要引入以下javascript库（.js）,由于ElementUI是基于vue的组件库，因此还需引入vue.js：

<!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

Hello World对应的HTML文件内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

在线运行结果：

CodePen在线运行Hello World
JSRUN.NET在线运行Hello World

2.2 在vue.js项目中完整引入Element

        首先安装Nodejs，然后利用npm（包管理工具Node package manager类似于Python的pip、conda）安装webpack、vue和vue-cli（也称vue 脚手架），打开cmd窗口，依次输入如下指令：
npm install webpack -g //安装webpack
npm install vue -g //安装vue
npm install vue-cli -g // 安装vue-cli
vue init webpack my-vue //使用vue-cli新建vue项目
cd my-vue //进入项目根目录
npm run dev //运行项目
Ctrl+C后输入Y//关闭项目
        总的来说，安装好nodejs、npm和vue后，可以在cmd窗口下查看对应的版本，如下图所示：

        然后可以利用IDEA打开项目，项目的 main.js 中内容如下：
在这里插入图片描述
        首先在项目根目录下打开cmd窗口，输入npm i element-ui -S //npm的方式安装ElementUI库后，项目的node_modules文件夹下就会有element-ui:

        为了完整引入ElementUI，需要给main.js中引入如下内容中的ElementUI 部分：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

        至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，在Vue项目下通过执行如下命令来安装所需模块包,并启动项目，有两种方式：一、cmd中输入命令；二、IDEA打开项目后在Terminal中输入命令。npm install 和 npm start

3、Element主题查看

        Element主题可以查看各种类型的Element：如Color、Button、Radio、CheckBox等，因此在这里我们可以直观浏览并查询到我们想要使用的ElementUI控件。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、Element组件学习

        Element组件中可以查询每个组件的属性信息和事件等，我们可以自定义样式对于属性信息进行修改，然后引入事件函数可以对ElementUI控件进行操作和事件相应。

属性信息
事件函数

4.1 自定义ElementUI部分组件

        如果在开发过程中，需要对ElementUI库中的组件进行大小、高度、字体 、颜色等属性，则可以在项目所属模块下新建style文件夹，在style文件夹中建立.css或.Less文件。
        以Less文件为例，可以进行如下自定义：***/deep/*** 可控制自定义样式的影响域（作用范围仅对当前模块下生效，即只对引用该样式文件的地方生效，而不会改变Element库中的buton样式，当然也不会改变其他模块下的button样式，所以每个模块下可以自定义所需的style\index.less文件）

/deep/ .el-button{
    background: color;
}

button按钮的点击事件：

<el-button @click="visible = true">Button</el-button>
jing_zhong
关注
专栏目录
elementUI学习笔记（二）
qq_42850724的博客
11-06 1251
elementUI学习笔记（二） 文章目录elementUI学习笔记（二）Formradio单选框Checkbox 多选框 Form radio单选框 单选框组：适用于在多个互斥的选项中选择的场景 结合el-radio-group元素和子元素el-radio可以实现单选组。在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量。 还提供了change事件来响应变化，绑定值变化时触发，它会传入一个参数value，也就是 选中的 R
elementUI学习笔记（一）
qq_42850724的博客
10-31 2312
elementUI学习笔记（一） 文章目录elementUI学习笔记（一）BasicForm Basic 按钮组件的使用 使用elementui的相关组件时所有组件都是el-组件名开头 在elementui中所有组件的属性全部写在组件标签上 <el-button 属性名=“属性”>默认按钮</el-button> 文字链接组件的使用 <el-link href="https://element.eleme.io" target="_blank">默认链接
Vue项目查看当前使用的elementUI版本的方法
01-19
在我们引入elementUI的时候，一般是两种方式：npm安装或者在script直接引入； 当然，在script直接引入的时候，我们也可以通过直接指定版本的方式，达到锁定版本的效果。 [removed][removed] 直接引入是从外网引入，每次加载都是读取外部网站，我们大部分开发者可能使用的是npm安装的方式，采用这种方式引入的时候，elementUI会保存在vue项目下的node_modules文件夹中，找到element-ui，里面就是elementUI的文件。 打开package.js
Vue项目查看当前使用的elementUI版本
hrbsfdxzhq01的博客
03-08 5082
在我们引入elementUI的时候，一般是两种方式：npm安装或者在script直接引入； 当然，在script直接引入的时候，我们也可以通过直接指定版本的方式，达到锁定版本的效果。 &lt;script src="//unpkg.com/element-ui@2.4.6/lib/index.js"&gt;&lt;/script&gt; 直接引入是从外网引入，每次加载都是读取外部网站，我...
element-ui的安装和使用，及在Vue项目中，查看当前正在使用的element-ui版本
gao_jun1的博客
09-04 8956
一、引入element-ui的两种方式 第一种方式：使用npm命令行安装 npm i element-ui -S 第二种方式：CDN直接获取最新资源 二、查看当前Vue项目的element的版本 我是用idea创建的Vue项目，在pack.json的dependencies中就可以直接查看 ...
axure element ui素材_web元件库 ElementUI元件库+后台模板页面+官网组件 pc元件库（兼容Axure9）...
weixin_39537977的博客
12-20 3495
本作品基于：http://element.eleme.io/#/zh-CN最新版本2.13.0二次创作，版权归原作者所有。作品包含web元件库及常用后台页面面板。元件库：包含导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、标签、进度条、树形控件、分页、标...
String.Join的使用，让代码更优美
bhegi_seg的博客
03-03 176
【善用新语法，让代码更优美】 jadk1.8为我们提供了String.join()方法 几个使用的例子。让我们在项目灵活的使用它，使代码更加优美 package com.niu.demo; import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * @description: String.Join的使用 * @author: nxq email: niuxiangqian163@163.com
vue 简单实用的elementUI表格封装
Start2019
07-23 2796
只需要了解slot组件就可以了。例举了两种表格：普通表格的写法，带操作按钮的报个写法
在vue项目中升级更新element ui版本.docx
07-11
如何在已有的项目上更新老项目的插件，不少刚入门的人一头雾水，本文档提供三步式解决方案，一看就懂。
权限系统reademe.md文档---待整理
77今天也学习了的博客
11-05 1585
1,网页布局:使用ElementUI插件: 安装elementui npm/cnpm i element-ui -S/–save; 在main.js程序入口文件中完整引入elementui: import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; 使用它: Vue.use(ElementUI) 将登录页面写过来:点击登录，请求数据，处理数据,获取到token，有token，进入首页 使用axios
vue 农历日历
weixin_43749669的博客
01-04 2072
前景: 客户要求 后台管理系统 (element-UI) 能够填报 员工的 农历生日 ! 试了 element 的 el-calendar 不是 很好用! 网上找到了此作者的笔记: https://blog.csdn.net/qq_32109661/article/details/87794155, 借鉴的他的,现在 我把 根据需求 优化了一点点 后的 版本 分享给大家, 希望能帮助到你 ! 嘿嘿(▽) 下面 我们进入正题: 1:因为可能 很多地方要用,我把它直接封装成一个组件(如下图): 2: 引入一
2021新年 Vue3.0 + Element UI 尝鲜小记
前端之美的博客
01-07 1433
2021年，又是新的一年，Vue 已经发布 3.0 版本，最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本，是时候开始学习一下这两个新技术。 本文主要记录了使用 Vue CLI 来完成项目搭建的过程。 安装升级最新的 Vue CLI 4.x npm install -g @vue/cli 输入vue -V (大写的V) 查看版本 @vue/cli 4.5.9，一定要安装新版，不然使用不了 Vue 3。 创建 Vue 3.0 版本的项目 如图，使用 vue create
npm查看（通过安装高效升级插件）、卸载、安装 elementui最新版本
ShawnRogers的博客
09-19 1137
安装高效升级插件 npm install -g npm-check-updates 查看最新的版本：npm-check-updates 简写：ncu 卸载之前的element-ui版本 npm uninstall element-ui 安装想要安装的版） npm install element-ui @2.6.3-S
ElementUI安装与使用指南
最新发布
ChinaDragon10的博客
01-30 3094
ElementUI使用指南
【vue-elementUI项目学习】
weixin_43132192的博客
01-05 176
创建vue + elementUI 项目
element版本升级解决：Unknown custom element: ＜el-statistic＞ - did you register the component correctly? ...
weixin_52616763的博客
10-10 3345
3，确认本地版本与教程版本不一致，升级指定版本。在package.json所在文件夹下，按下shift，右击鼠标，点击“在此处打开Powershell窗口”，输入：npm install element-ui@2.15.14 --save，按下回车即可。4，再次查看本地版本：在package.json这个文件里，已成功升级。5，回到浏览器，刷新页面，查看内容已正常显示，且无报错信息。升级本地element-ui版本。
elementUI常用命令
小馒头味的博客
10-16 1398
package.json中可以查看elementUI的版本: "element-ui": "^2.7.2", 查看版本 npm list element-ui 安装指定版本 npm i element-ui@2.7.2 卸载 npm uninstall element-ui
IDEA 2020.1.3 创建Web项目全攻略
"idea2020.1.3 手把手教你创建web项目的方法步骤" 在本文中，我们将深入探讨如何使用IntelliJ IDEA 2020.1.3版本创建一个Web项目。IDEA是一款强大的Java集成开发环境，它的项目结构与Eclipse有所不同，理解这些差异...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值