element ui 框架的优势_Element UI 框架
实验3、Element UI框架
一、简介
1、内容:Element UI简介、全局引入、按需引入、实战。
二、具体
1、Element UI简介
Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端元组件库,由饿了么前端团队推出。它并不依赖于Vue,却是一个十分适合Vue项目的框架。可使用Element UI轻松制作出网页,为前端开发人员大大减轻了代码负担。本次项目也是基于Element UI框架实现的。
2、Element UI按需引入(本次不用)
根据自身需求对Element里面组件进行单独引入。利弊如下:
优点:单独引入,抛弃未使用组件,从而对项目体积造成影响不大。
缺点:手动按需引入,需要进行更多代码工作,增大了开发人员的负担,同时繁多的组件样式,会导致代码繁杂紊乱,不利于美观。
a)安装babel-plugin-component插件,可帮助实现按需引入:npm install babel-plugin-component -D
b)找到babel.config.js,并修改为:
module.exports = {
presets: [
'@vue/app',
['@babel/preset-env', {'modules': false}]
],
plugins: [
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}
c)组件引入 & 加载
// 在 main.js 中 import App from './App.vue' 下方添加以下代码
// 引入所需样式组件
import { Button, Select,Option } from 'element-ui';
// 执行引入的样式组件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
* Vue.use(Option)
*/
d)main.js传入对象进行全局配置
// main.js
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
size:改变组件默认尺寸,默认为"small"
zindex:设置弹框初始z-index(默认为2000)
3、Element UI全局引入
Element UI提供了插件,实验一已完成安装(npm install element-ui --save)。但还需要引入,引入方式有两种:按需和全局。
全局引入--将整个Element UI里面组件统统引入到项目中,利弊为:
优点:使用方便,一次引入后就可以直接使用所有样式;
缺点:因为整体引入所有样式,所以导致项目体积增大。
适合:大量使用Element UI框架的项目。
引入方式:
// 将 main.js 修改为:
import Vue from 'vue'
import App from './App.vue'
import router from './router';
// 引入 Element UI
import ElementUI from 'element-ui';
// 单独引入样式文件
import 'element-ui/lib/theme-chalk/index.css';
// 执行 ElementUI
// Vue.use(ElementUI); -->传入配置对象,可改为
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
注意:样式文件要单独引入。
4、Element UI实战:创建一静态页面
1)component/page/EleDemo.vue
导航
分组一
选项 1
选项 2
分组二
选项 3
选项 4
选项 5
选项 5-1
查看
新增
删除
AsunaCC
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
export default {
data() {
const item = {
date: '2019-09-17',
name: 'shiyanlou',
address: '四川省成都市'
};
return {
tableData: Array(10).fill(item)
}
}
};
2)修改router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
export default new VueRouter ({
routes: [
{
path: '/home',
component: () => import('../components/common/Home.vue'),
children: [
{
path: 'child1',
component: () => import('../components/page/Children1.vue'),
},
{
path: 'child2',
component: () => import('../components/page/Children2.vue'),
},
{
path: 'child3',
component: () => import('../components/page/Children3.vue'),
}
]
},
{
path: '/demo',
component: () => import('../components/page/EleDemo.vue'),
}
]
})
3)浏览器打开:****/#/demo
三、小结
本节主要学习了Element UI框架介绍、引入(按需+全局)、实战。理解不难,重要的是如何准确有效地创建实际页面。
element ui 框架的优势_Element UI 框架相关推荐
- element表格里面放图片_Element UI table里上传图片后如何显示在表格里
问题描述 写了一个后台管理系统,需求是通过新增按钮,弹出一个dialog来上传 图片,详情(文章),视频. 不太明白这整个逻辑怎么实现. 问题出现的环境背景及自己尝试过哪些方法 现在的问题就是我在di ...
- element ui分页怎么做_element ui里面table分页,页数从0开始的怎么做?
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- element表格里面放图片_Element ui表格展示图片问题
在MyBook Live上部署svn 一直以来都在用svn管理源代码,美中不足的是由于svn服务器端部署在本地,无法实现在异地迁入迁出程序,因此考虑将svn服务器部署在我的MyBook Live上. ...
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
- vue ui框架_Vue移动端UI框架指南
自从Vue成为前端的主流框架之后,各家UI框架也越来越多,今天重点聊一聊移动端的那些框架吧,Vue移动端框架到底哪家强?以下排名不分先后,开发过程中根据自己的具体业务需求来做选择. 1.Vux 中文文 ...
- TMS FNC UI Pack 3.1Crack,四个框架和五个操作系统的强大控件
TMS FNC UI Pack是TMS软件的产品,具有针对四个框架和五个操作系统的强大控件和丰富功能. TMS FNC控件可以在以下框架中同时使用: TMS FNC控件可以在以下操作系统/浏览器中同时 ...
- 推荐几个精致的web UI框架及常用前端UI框架
以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范, ...
- vue3使用的移动端UI框架,vue移动端ui框架哪个好
号称目前最火的前端框架Vue,它有什么显著特点呢? 1.Vue是什么是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App.是前端的主流框架之一,和.一起,并成为前端三大主流框架. 是一套构 ...
- .NET跨平台框架选择之一 - Avalonia UI
本文阅读目录 1. Avalonia UI简介 Avalonia UI文档教程:https://docs.avaloniaui.net/docs/getting-started 随着跨平台越来越流行, ...
- 6. Unity3d Lua框架 - xLua - UIManager UI管理系统:提供UI操作、UI层级、UI消息、UI资源加载、UI调度、UI缓存等管理
UIManager.lua – UI管理系统:提供UI操作.UI层级.UI消息.UI资源加载.UI调度.UI缓存等管理 – 注意: – 1.Window包括:Model.Ctrl.View.和Acti ...
最新文章
- 爬过这 6 个坡,你就能对 Linux 操作系统了如指掌
- linux ssh连接交换机_linux SSH 隧道
- LeetCode 17电话号码的字母组合(搜索)18四数之和
- java list用法 包,java list用法示例详解
- 从编解码算法到全链路RTC架构,揭秘淘系直播技术演进之路
- .Net Core应用框架Util介绍(二)
- linux系统报警怎么办,常见Linux系统故障和解决方法
- 周鸿祎:谷歌Chrome不是浏览器
- Onvif备忘录(2)----客户端端设备发现
- jquery html页面跳转,HTML 链接
- iQOO Neo5搭载66W超快闪充:30分钟回血!
- 微课|玩转Python轻松过二级:第3章课后习题解答1
- 提示illegal reference to data member'CPMAgentManageDlg::m_matrixMatrixSt'in a static member function
- 理解OpenCL数据类型
- NLTK学习笔记(六):利用机器学习进行文本分类
- html中禁止网页另存为、查看源文件、屏蔽鼠标右键
- 腾讯云服务器如何选择配置?
- 微信诈骗产业链,俩字儿是核心:杀熟
- CSDN 社区内容创作规范
- 一个让Google、Facebook、Amazon都羡慕的平台,为什么说阿里妈妈是数字营销的未来...