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 去掉 Lintter2.X是否使用history模式?   YesIn package.json是否把當前配置作為以后創建項目時的預設配置?   No在新項目中通過npm命令安裝ElementUI。# 進入項目目錄后執行安裝命令cd ele_pronpm 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>  <p>    <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>  </p></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  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 >    <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。