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。