# iview-admin簡介
iview-admin是iview生態圈的成員之一。是一套基于 Vue.js,搭配ivew UI([https://www.iviewui.com/](https://www.iviewui.com/))?組件庫形成的后臺集成解決方案。
# 環境
Windows+Node.js +git
# 項目啟動
## 下載代碼
在GitHub上下載iview-admin代碼
git clone https://github.com/iview/iview-admin.git -b 2.0

## 安裝依賴
找到文件所在位置

進入項目根目錄 cd iview-admin
安裝依賴 npm install
## 運行項目
運行項目 npm run dev
項目運行完成瀏覽器會自動打開網頁,進入登錄頁面。如圖

# 目錄結構

項目運行成功,我們可以添加自己的模塊,下面我們進行如下操作,新建頁面、配置路由。
# 新建頁面(以行李查詢為例)
## 說明:
在index.html處有個id="app"的div,在App.vue中也有一個id="app" 的div。頁面渲染的就是這個組件。

在App.vue中有個router-view標簽,默認在這渲染當路由為"/"指向的組件,所以要設置路由。

## 步驟
### 在src/views下面新建文件夾luggage
### 在luggage文件夾下新建luggage.vue luggage.js 和 luggage.css 文件

這里我們就創建好了一個組件即新的頁面。它的頁面路徑為 src/views/luggage。這個路徑將在后面的路由配置中用到。要想在瀏覽器上展示,接下來我們就要進行路由的配置
# 路由配置
說明:首先我們要看vue-router插件是否下載(一般項目npm install的時候會自動下載vue-router插件)

如果沒有下載,用下面的命令進行下載
npm install --save vue-router
之后在src/router/index下看有沒有引入路由

## 引入成功,開始使用插件

## 生成router實例

這里的routers是從同級目錄下的routers.js引入的。routers.js這個文件是定義路由的文件。下面以行李查詢為例進行定義路由

這是上面新建的頁面路徑我們已經配置到了路由里面,vue會自動匹配改視圖在頁面做出響應。
這里定義了路由,同時要在zh-CN.js下面配置菜單的中文title

## 在src/main.js中把路由實例傳給vue根組件

這樣應用就啟動了。在左側菜單就形成了我們配置的路由

# 配置頁面詳解
在結構層進行頁面布局,在行為層進行數據渲染
## 頁面布局使用iview插件
同路由一樣。我們要先看是否下載iview插件

要是沒有下載,用如下命令進行下載
npm install iview@1.0.1 --save
下載之后,在src/main.js引入iview插件

引入成功之后,我們就可在任意頁面使用iview插件組件。組件的引用具體看文檔
[http://v1.iviewui.com/](http://v1.iviewui.com/)
下面我們做一個行李查詢項目,包括旅客列表,旅客關聯的行程、行李信息
這些頁面展示都放在結構層,<template></template>標簽里面。注:此標簽下面緊接著是一個div標簽,如圖

這個功能,頁面整體有三部分。條件查詢表單、旅客列表表格、旅客關聯抽屜。用到的iview組件有form表單、table表格、drawer抽屜。具體參數配置看iview文檔

頁面效果如圖

下面以table表格為例。展示頁面與后臺交互,首先我們要在vue文件中引入js文件

## 頁面布局
直接引用iview的table組件

我們看一下iview的table組件的參數配置

## 初始化數據


## 行為層數據獲取
### 配置請求鏈接

配置完成之后。我們將方法暴露出來。方便給組件引用

### 在頁面js文件中引入接口方法

### 方法中調用接口

### 數據賦值
此時將調用后端返回的數組數據賦值給了table表格的data數組

頁面剛開始加載就要將數據渲染出來,所以要在mounted鉤子函數中調用獲取旅客列表函數

這時頁面里面的表格就渲染出來了
