vue 框架之 Element-UI

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/

  4.2新建頁面：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用於實現導航，其基本結構為：

<el-menu class="el-menu-demo" mode="horizontal">
    <el-menu-item>指南</el-menu-item>
    <el-menu-item>組件</el-menu-item>
    <el-menu-item>主題</el-menu-item>
    <el-menu-item>資源</el-menu-item>
</el-menu>

設置導航的默認選中項

<el-menu class="el-menu-demo" mode="horizontal" default-active="2">
    <el-menu-item index="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">資源</el-menu-item>
</el-menu>

設置導航的下拉子菜單

<el-menu class="el-menu-demo" mode="horizontal" default-active="2">
    <el-menu-item index="1">指南</el-menu-item>
    <el-submenu index="2">
        <span slot="title">組件</span>
        <el-menu-item>組件示例</el-menu-item>
        <el-menu-item>組件使用文檔</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">主題</el-menu-item>
    <el-menu-item index="4">資源</el-menu-item>
</el-menu>

設置側邊欄導航（垂直方向）

基本結構如下：

<el-menu class="el-menu-vertical-demo" 
         mode="vertical" 
         default-active="2">
    ....
</el-menu>

ElementUI的經典布局系統

ElementUI提供了Container布局容器， 用於完成頁面主體結構的搭建。Container布局容器提供了5個相關組件：

1. <el-container> 容器 內部可以盛放后四種組件。

2. <el-header> header內用於編寫頁面頭部部分。

3. <el-aside> aside內用於編寫頁面側邊欄部分。

4. <el-main> main內用於編寫頁面主體內容部分。

5. <el-footer> footer內用於編寫頁面頁腳部分.

ElementUI布局組件的使用規則：

1. 布局組件包含上述5個組件。

2. el-container的子元素只能是后四個組件（也可以嵌套container）。后四個組件的父元素只能是el-container。

3. el-container擁有屬性direction來控制子元素的排列方向，可以是水平（direction='horizontal'）,可以是垂直（direction='vertical'）

4. 默認情況下，若el-container包含header或footer，則會垂直方向排列。否則默認情況下水平方向排列。