Element UI快速入门
Element UI快速入门
前提：
电脑中有node.js 和npm
如果没有可以查看下载安装npm
1.1 官方定义
网站快速成型工具和桌面端组件库
1.2 定义
Element UI 就是基于vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面。
2.安装Element UI
2.1 通过vue脚手架创建项目
vue init webpack element(项目名)
2.2 在vue脚手架项目中安装 Element UI
# 1.下载elementUI
npm i element-ui -S#2.指定当前项目中使用elementui
/*引入 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//在vue脚手架中使用ElementUI
Vue.use(ElementUI);
3、按钮组件
# 1.默认样式按钮
<!-- 使用默认按钮组件--><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row># 2.简洁按钮 鼠标移动上去才会显示背景颜色<el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row>
# 3. 圆角按钮<!-- 使用圆角按钮 --><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row># 4. 图标按钮<el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row>
Button.vue 用div包围按钮组件
<template><div><!-- 使用默认按钮组件--><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><!-- 使用简洁按钮 plain --><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><!-- 使用圆角按钮 round --><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><!-- 图标按钮 icon --><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div>
</template><script>
export default {name: "button.vue"
}
</script>
<style scoped></style>
vue的项目如何关闭服务
打开Terminal窗口按键盘【Ctrl】+【C】，提示是否关闭，键盘输入 【y】退出
https://www.bilibili.com/video/BV1NK4y187XH?p=3&spm_id_from=pageDriver
4、按钮组件的详细使用
4.1 创建按钮
总结：日后使用element ui的相关组件的时候需要注意的是，所有的组件都是el-组件名称开头
<el-button disabled>默认按钮</el-button>
4.2 按钮的属性的使用
在element ui中所有的属性都写在组件的标签上
<h1>使用按钮的属性</h1>
<el-button type="primary" size="medium " plain>primary</el-button>
<el-button type="primary" size="small " round icon="el-icon-picture"></el-button>
<el-button type="primary" size="mini ">primary</el-button>
4.3 按钮组的使用
<h1>按钮组的使用</h1>
<el-button-group><el-button type="primary" icon="el-icon-back">上一页</el-button><el-button type="primary" icon="el-icon-right">下一页</el-button>
</el-button-group>
注意：
1、element ui的相关组件的时候需要注意的是，所有的组件都是el-组件名称开头
2、element ui中的组件的属性使用直接将属性名=属性值方式写在对应的组件标签上
5、Link文字链接组件
<el-link >默认链接</el-link>
<h1>使用文字链接</h1> <el-link type="danger" disabled>默认链接</el-link> <el-link type="success" icon="el-icon-user" href="https://www.baidu.com">默认链接</el-link> <el-link :underline="aa" >默认链接</el-link> <el-link :underline="false" type="info" >默认链接</el-link>
注意：
使用是否有下划线，采用1或2均可
1、需要在前面加个:绑定
2、在data中写
<el-link :underline="aa" >默认链接</el-link>export default { name: "Link.vue", data(){ return{ aa:false, } }}
例子：
<template> <div> <h1>使用文字链接</h1> <el-link type="danger" disabled>默认链接</el-link> <el-link type="success" icon="el-icon-user" href="https://www.baidu.com">默认链接</el-link> <el-link :underline="aa" >默认链接</el-link> <el-link :underline="false" type="info" >默认链接</el-link> </div></template><script>export default { name: "Link.vue", data(){ return{ aa:false, } }}</script><style scoped></style>
6、Layout（栅格）布局组件的使用
通过基础的24分栏，迅速简便的创建布局
在element ui中布局组件将页面划分为多个行row,每行最多分为24列（列）
6.1 使用Layout
<el-row> <el-col :span="8">占用8份</el-col> <el-col :span="8">占用8份</el-col> <el-col :span="8">占用8份</el-col></el-row>
注意：
1、在一个布局组件中是由row和col组合而成的
2、在使用的时候要区分row属性和col属性
6.2 属性的使用
- 行属性
<el-row :gutter="10" tag="span"> <el-col :span="8"><div style="border:1px red solid;">占用8份</div></el-col> <el-col :span="8"><div style="border:1px red solid;">占用8份</div></el-col> <el-col :span="8"><div style="border:1px red solid;">占用8份</div></el-col></el-row>
- 列属性
<h2>layout组件的偏移</h2><el-row> <el-col :span="12" :offset="6"><div style="border:1px red solid;">占用12份</div></el-col></el-row>
Element UI快速入门相关推荐
- 【组件-工具】小程序ui组件Color UI快速入门
小程序ui组件Color UI快速入门 什么是ColorUI ColorUI是UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互,样式更加华丽精美,使用方法简单,只需 ...
- 【干货】磨金石教育UI快速入门！U设计基础知识整理，新人必备
今天 磨金石教育 小编 整理 出了一篇 关于 UI 的概念 .UI 入门 需要 掌握 的软件工具 .理论知识 以及 能力 要求 ,希望 能够 为想要 进入 这个 领域 的伙伴 带来 帮助 . UI设计 ...
- 使用element UI 快速制作一个列表页面
使用element制作一个列表页面,并且当点击"查看调查问卷"时弹出弹框. (图一) (图二) (图三) 1. 制作一个名叫DataListTable <DataListTa ...
- 用vue(element ui)快速开发后台管理
平时我们在用vue开发网站后台管理的时候.比如说要写管理文章的功能,要先去写列表页面,编辑页面,添加页面.另外还需要程序提供对应的增删改查接口 图片上传接口等等,那么有没有一种快速的方法.可以用程序来 ...
- Onsen UI快速入门 --Onsen UI
一.什么是Onsen UI? 1.一系列专为移动应用程序设计的丰富UI组件.具有遵循原生iOS和Android设计标准的即时实现功能.免费使用,100%开源软件(Apache v2许可证).Onse ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率 ElementUI PC端 MintUI 移动端 一.全部引入 安装element-ui cnp ...
- Element快速入门
目录 一.Element快速入门 1. 引入Element 的css.js文件 和 Vue.js(将其copy至webapp下) 2. 创建Vue核心对象 一.Element快速入门 官网:Eleme ...
- 视频教程-【吴刚大讲堂】视觉设计快速入门50讲-UI
[吴刚大讲堂]视觉设计快速入门50讲 业内知名UID.UED.用户体验.品牌策略与创意设计师,十三年行业职业教育培训经验,业内"UI视频第一人",教学总监.视觉设计讲师. Adob ...
- element ui 火狐_快速Firefox UI调整
element ui 火狐 Are you looking for way to combine your Reload & Stop Buttons or perhaps you would ...
最新文章
- smartgwt_SmartGWT入门，提供出色的GWT界面
- 记录一次spark连接mysql遇到的问题
- JAVA HASHMAP 用法
- 擴展 CommandField 類別 - 刪除提示訊息
- mysql 以周为单位记录数据_mysql 按月/按周汇总统计函数 DATE_FORMAT() 函数
- 唯有创新不可辜负！混合集成成就云时代创新
- WinForm软件开机自动启动详细方法
- linux 下安装boost 库
- qt 获取屏幕句柄_VC中获取窗口句柄的各种方法
- 晒下自己App广告平台积分墙收入，顺便点评几个广告平台
- 朱生豪先生的情书 ---- 醒来觉得甚是爱你
- R语言期末考试复习题第一天整理内容（自己整理+参考博主：紧到长不胖 ）请多关注 紧到长不胖 ，每天有惊喜！
- 【测试开发】Pytest—Html测试报告定制及封装
- Docker学习：容器之间单/双向通信 |--link /自定义网络实现互认容器别名 （理论篇）
- 《Kubernetes知识篇：基于Pod进行资源配额管理》
- WSUS服务器的详细配置和部署
- 一行代码生成数据分析报告—Pandas-profiling
- 【故障分析】轴承故障分析（时频图+功率谱）含Matlab源码
- go 及 liteIDE 安装
- PLSQLDeveloper登录Oralce