ElementUI
什么是 Element UI
- Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
- Element UI是基于Vue 2.0的
- Element UI 提供一组组件
- Element UI 提供组件的参考实例, 直接复制
官网:https://element.eleme.cn/#/zh-CN/component/installation
2 搭建环境
1 创建vue项目
步骤一: 通过 vue-cli创建项目
vue create eui01
步骤二: 手动选择功能(Manually select features)
步骤三: 选择需要的组件
- Babel : JavaScript编译器, 用于版本兼容, 复制将 ES6+ 转换成 ES 5.
- Router : 路由
- Vuex : 组件数据共享
步骤四: 使用各个组件的配置,已独立文件的方式存在.
步骤五:是否保存当前配置
步骤六: 安装完成, 进入项目,并启动项目测试
2 安装 element-ui组件
第一步:npm i element-ui
第二步:在main.js中引入element-UI
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3 综合案例: 主体架构
1 需求
2 布局
使用element-ui的布局容器(Container) 进行页面布局
官方文档 : https://element.eleme.cn/#/zh-CN/component/container
步骤一: 修改src/main.js 导入 element-ui 样式和组件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式
<template>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
</style>
3 reset.css
布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式
步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)
/*
KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td {
/* table elements 表格元素 */
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button, input, select, textarea {
/* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
h1 {
font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 {
font-size: 16px; }
h3 {
font-size: 14px; }
h4, h5, h6 {
font-size: 100%; }
address, cite, dfn, em, var {
font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt {
font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small {
font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
/* 重置列表元素 */
ul, ol {
list-style: none; }
/* 重置文本格式元素 */
a {
text-decoration: none; }
a:hover {
text-decoration: underline; }
abbr[title], acronym[title