介紹

iView-admin是一套後端管理界面模板，基於Vue2.0，iView（現在為View UI）組件是一套完整的基於Vue的高質量組件庫，雖然Github上有一套非常火的基於Element UI的管理界面模板，但是多一種選擇總是好的，本文就帶大家一起看看這套UI，如果剛好適合你，那必然值得一試！

github

倉庫：https://github.com/iview/iview-admin

文檔：https://lison16.github.io/iview-admin-doc/#/

官網： https://www.iviewui.com/

概述

iView-admin是iView生態中的成員之一，是一套採用前後端分離開發模式，基於Vue的後臺管理系統前端解決方案。iView-admin2.0脫離1.x版本進行重構，換用Webpack4.0 + Vue-cli3.0作為基本開發環境。內置了開發後臺管理系統常用的邏輯功能，和開箱即用的業務組件，旨在讓開發者能夠以最小的成本開發後臺管理系統，降低開發量。

快速開始

從github獲取最新的iView-admin代碼，使用如下命令獲取2.0分支最新代碼：

git clone https://github.com/iview/iview-admin.git -b 2.0

然後進入項目根目錄

cd iview-admin

安裝依賴並運行項目

npm install
npm run dev

然後只需要等待編譯結束後其自動打開頁面

模板介紹

1、模板整體上分為三大塊，與傳統佈局方式無異，自帶tab標籤頁，預覽截圖如下：

2、組件介紹

由於是基於iView的，因此iView 的組件都可以使用，一起瞧一瞧

• 樹組件：

• 拖拽

• 抽屜

• 組織結構

• 樹狀表格

• 圖片裁剪

• 多功能數據表格

• 窗口分割

• 文本編輯器

• 圖標自定義

• 文件上傳

• 粘貼數據表格

• 上傳和導出Excel

• 動態標籤路由

• 可拖動模態框

• 多級菜單

• 項目目錄結構

權限控制

權限控制分兩種，即整個頁面具有權限控制，和頁面中單個組件需要權限。

1.整個頁面訪問限制

整個頁面的權限控制較為簡單，你只需要在路由配置的meta中配置access字段即可，它是一個數組，如果你沒有設置access字段，那麼該頁面是所有用戶都可以訪問的；如果你設置了該字段，那麼只有該字段所設置的數組中包含的權限名稱的用戶可訪問該頁面。 如下：

{
 path: '/page1',
 name: 'page1',
 component: Main,
 meta: {
 access: ['super_admin'] /*
 * 該頁面只有權限值為super_admin的用戶才能訪問
 * 如果這級路由有子路由，則子路由也只有super_admin才能訪問
 * 如果不設置此字段，則所有用戶均可訪問
 */
 }
}

2.單個組件瀏覽控制

如果你的一個頁面上有多個組件，而不同的組件對於權限的要求又有所不同，那麼，你可以使用如下方法給一個組件設置根據權限值配置它的可訪問性：

<template>
 

 <component1>
 <component2>
 

/<template>

上面的例子中，admin和super_admin權限的用戶都可看到component1組件，而component2只有super_admin可以看到。

全局指令

draggable

該指令作用於組件上，用於實現任意組件的可拖拽效果

<button>
buttonOptions: {
 trigger: '#button', // 設置能觸發拖動的元素的CSS選擇器
 body: '#button' // 設置需要移動的元素的CSS選擇器
}

接口請求

在iview-admin2.0對axios進行了封裝，如果你需要調用接口，步驟如下：

step1

在./src/api目錄中定義接口調用方法，拿獲取表格數據來做示範，在api文件夾下創建data.js，然後在內部定義如下：

import axios from '@/libs/api.request'
export const getTableData = () => {
 return axios.request({ // 這裡返回的是一個Promise，request方法傳入一個配置對象，配置項可參考axios
 url: 'get_table_data',
 method: 'get'
 })
}

step2

在使用的地方如下：

import { getTableData } from '@/api/data'
getTableData().then(res => {
 this.tableData = res.data
}).catch(err => {
 console.log(err)
})

總結

對於程序員來說，特別是專注於中後端的程序員來說，一套完整的UI框架能夠節省很多時間，提高工作效率，如果iView-admin剛好適合你，不妨試一試！下面是最近很火的一首程序員之歌，enjoy it！