ElementUI

VUEUI组件库

ElementUI 饿了么团队开发的PC端的vue组件库。

MintUI 饿了么团队开发的移动端的vue组件库。

VantUI 有赞团队开发的移动端的vue组件库。

 

ElementUI

饿了么团队开发的PC端的vue组件库。

搭建ElemmentUI基础环境（基于脚手架）

新建脚手架项目。

# 找一个空目录   day01/demo 
vue create ele_pro
# 依次选择
Manally select Features   手动选择
Choose Vue Version  -- Babel -- Router 去掉 Lintter
2.X
是否使用history模式？   Yes
In package.json
是否把当前配置作为以后创建项目时的预设配置？   No
在新项目中通过npm命令安装ElementUI。

# 进入项目目录后执行安装命令
cd ele_pro
npm i element-ui -S
安装完成后，将会在node_modules中出现element-ui文件夹。还会在package.json中的dependencies配置项中出现element-ui。

在脚手架项目main.js中， 配置ElementUI。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

　　

开始使用。

需求：访问http://localhost:8080/button, 可以看到Button.vue页面。

新建vue页面： src/views/Button.vue，按照文档编写elementUI中的Button组件。

<!-- src/views/Button.vue -->
<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>
  </div>
</template>
配置路由，router/index.js，目的是为了告诉vue， 当客户端访问/button时，页面中需要显示Button.vue中定义的内容。

import Button from '../views/Button.vue'
const routes = [
  {
    path: '/button',
    component: Button
  },
]

　　

 

思考

ElementUI经常用于编写什么类型的PC网站？

前台交互型 后台管理型

 

Navmenu组件

navmenu组件用于实现导航。其基本结构为：

<el-menu mode="horizontal">   
    <el-menu-item>导航1</el-menu-item>
    <el-menu-item>导航2</el-menu-item>
    <el-menu-item>导航3</el-menu-item>
    <el-menu-item>导航4</el-menu-item>
</el-menu>

　　

案例：访问http://localhost:8080/nav 看到导航示例效果。

1. 新建Nav.vue，编写导航内容。

2. 配置路由。 指定 /nav 与 Nav.vue之间的映射关系。

 

设置导航的默认选中项

<el-menu mode="horizontal" default-active="2">   
    <el-menu-item index="1">导航1</el-menu-item>
    <el-menu-item index="2">组件</el-menu-item>
    <el-menu-item index="3">导航3</el-menu-item>
    <el-menu-item index="4">导航4</el-menu-item>
</el-menu>

　　

设置导航的下拉子菜单

<el-menu mode="horizontal" default-active="2">   
    <el-menu-item index="1">导航1</el-menu-item>
    <el-menu-item index="2">组件</el-menu-item>
    <el-submenu index="3">主题
        <el-menu-item index="ayh">暗夜黑</el-menu-item>
        <el-menu-item index="qkl">秋裤蓝</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">导航4</el-menu-item>
</el-menu>

　　

 

设置侧边栏导航（垂直方向）

<el-menu mode="vertical" default-active="2">   
    <el-menu-item index="1">导航1</el-menu-item>
    <el-menu-item index="2">组件</el-menu-item>
    <el-menu-item index="3">主题</el-menu-item>
    <el-menu-item index="4">导航4</el-menu-item>
</el-menu>

　　

 

如何修改组件库中组件的默认样式

找这个组件文档是不是给了一个属性可以控制该样式，如果有就用属性来设置样式，不要自己瞎编。

<el-menu active-text-color="#f00"  ... >
</el-menu>
如果文档中没有给出控制该样式的属性，需要检查Element，看一下需要修改的样式的类名，编写style标签 或 内联样式 修改相应样式。

<el-menu class="mymenu" style="width:200px"></el-menu>
​
<style scoped>
.mymenu { border-right: none; }
</style>
检查需要修改的组件的类名，在页面的style中重写该样式，若样式优先级没有组件的高，则添加 !important。绝招：去掉style标签中的scoped。

<style scoped>
.el-menu { border-right: none !important; }
</style>

　　

 

ElementUI的经典布局系统

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

案例：实现页面布局结构：Header、Aside、Main、Footer。

新建页面 views/Container.vue页面。 编写布局。

配置路由。 /container <----> Container.vue

　　

 

案例：实现ElementUI官网的基本布局结构

实现步骤：

1. 新建Component.vue。 搭建header、aside、Main布局系统。

2. 配置路由。 /component <---> Component.vue

3. 在header中放置水平导航， 在aside中放置垂直导航，main中自定义。

4. 微调页面的布局效果。 

 

 

案例：实现ElementUI官网的基本布局结构

实现步骤：

新建Component.vue。 搭建header、aside、Main布局系统。

配置路由。 /component <---> Component.vue

在header中放置水平导航， 在aside中放置垂直导航，main中自定义。

微调页面的布局效果。

　　

基于嵌套路由实现main区域内容的动态显示

嵌套路由的设计：

/component/button     组件页面中显示Button的内容
/component/container  组件页面中显示Container的内容
/component/icon       组件页面中显示Icon的内容

　　

实现思路：

准备3个组件页面： Button.vue Container.vue Icon.vue。

在Component.vue的main的部分，添加router-view组件。

<el-main class="test">
    <router-view />  <!-- 二级路由 -->
</el-main>
配置router/index.js，在/component路由下配置嵌套路由children配置项。

{ 
    path: '/component',
    component: Component,
    // 重定向  当直接访问/component时， 将会自动跳转到
    // "/component/button"
    redirect: '/component/button', 
    children: [{
      path: 'button',
      component: Button
    },{
      path: 'container', 
      component: Container
    },{
      path: 'icon', 
      component: Icon
    }]
 },

1. 打开浏览器，在请求资源路径中，通过请求路径访问这3个地址。

2. 开启侧边栏导航的"路由模式"，修改每个item的index即可以实现点击跳转。

3. 配置/component的重定向， 避免bug。