Element-UI
是一套为开发者、设计师、产品经理准备的基于Vue
的桌面端组件库。
element-ui官网 https://element.eleme.io/#/zh-CN
搭建ElementUI
基础环境(基于脚手架)
1.新建脚手架项目。
# 找一个空目录
vue create ele_project
# 依次选择
Manually select features
Choose Vue version - Babel - Router
2.X
使用history模式 y
In package.json
是否把当前配置作为以后创建项目的预设配置? n
2.在新项目中通过npm install
element-ui
。
# cd命令 进入 ele_project 文件夹内部
cd ele_project
# 安装
npm install --save element-ui
3.在脚手架项目中,配置ElementUI
。
// 在 main.js 中引入配置ElementUI
import ElementUI from 'element-ui' //引入element-ui包
import 'element-ui/lib/theme-chalk/index.css' //引入element-UI 样式
Vue.use(ElementUI) //使用
4.开始使用。
4.1启动服务:
# 在 ele_project 项目目录内执行命令
npm run serve
# 访问
http://localhost:8080/
新建页面:views/button.vue
,在其中编写组件template
。
<template>
<div>
<el-button>普通按钮</el-button>
<el-button type="primary">主要按钮</el-button>
</div>
</template>
4.3定义路由。使得访问:http://localhost:8080/button
,看到效果。
import Button from '../views/Button.vue'
const routes = [
{
path: '/button',
name: 'Button',
component: Button
},
...
]
element的组件属性可以在上面的网址查看 内容很多就不一一介绍了
由于element 样式比较固定 和多时候适用于 后台管理网站的开发 接下来就简单介绍下 搭建个网页大结构
Navmenu
组件 (导航)
Navmenu
用于实现导航,其基本结构为:
1 <el-menu class="el-menu-demo" mode="horizontal">
2 <el-menu-item>指南</el-menu-item>
3 <el-menu-item>组件</el-menu-item>
4 <el-menu-item>主题</el-menu-item>
5 <el-menu-item>资源</el-menu-item>
6 </el-menu>
View Code
设置导航的默认选中项
1 <el-menu class="el-menu-demo" mode="horizontal" default-active="2">
2 <el-menu-item index="1">指南</el-menu-item>
3 <el-menu-item index="2">组件</el-menu-item>
4 <el-menu-item index="3">主题</el-menu-item>
5 <el-menu-item index="4">资源</el-menu-item>
6 </el-menu>
View Code
设置导航的下拉子菜单
1 <el-menu class="el-menu-demo" mode="horizontal" default-active="2">
2 <el-menu-item index="1">指南</el-menu-item>
3 <el-submenu index="2">
4 <span slot="title">组件</span>
5 <el-menu-item>组件示例</el-menu-item>
6 <el-menu-item>组件使用文档</el-menu-item>
7 </el-submenu>
8 <el-menu-item index="3">主题</el-menu-item>
9 <el-menu-item index="4">资源</el-menu-item>
10 </el-menu>
View Code
设置侧边栏导航(垂直方向)
基本结构如下:
1 <el-menu class="el-menu-vertical-demo"
2 mode="vertical"
3 default-active="2">
4 ....
5 </el-menu>
View Code
ElementUI
的经典布局系统
ElementUI
提供了Container
布局容器, 用于完成页面主体结构的搭建。Container
布局容器提供了5个相关组件:
<el-container>
容器 内部可以盛放后四种组件。<el-header>
header
内用于编写页面头部部分。<el-aside>
aside
内用于编写页面侧边栏部分。<el-main>
main
内用于编写页面主体内容部分。<el-footer>
footer
内用于编写页面页脚部分.
ElementUI
布局组件的使用规则:
- 布局组件包含上述5个组件。
el-container
的子元素只能是后四个组件(也可以嵌套container
)。后四个组件的父元素只能是el-container
。el-container
拥有属性direction
来控制子元素的排列方向,可以是水平(direction='horizontal'
),可以是垂直(direction='vertical'
)- 默认情况下,若
el-container
包含header
或footer
,则会垂直方向排列。否则默认情况下水平方向排列。