## 1.1.導入項目 :id=import
1. 下載項目后進行解壓
2. 使用IDEA、WebStorm、HBuilder等前端開發工具打開
3. 打開index.html點擊右上角圖標運行到瀏覽器：
!> **注意：** 必須以http://的形式訪問，而不是file://的形式訪問。
## 1.2.項目結構 :id=structure
```
|-assets
| |-css // 樣式
| |-images // 圖片
| |-js
| |-main.js // 入口js
| |-libs // 第三方庫，echarts(圖表)、layui
| |-module // layui擴展模塊，版本更新只用替換此目錄
| |-theme // 主題資源
| |-img // easyweb框架用到的圖片
| |-admin.css // easyweb框架核心樣式
| |-admin.js // admin模塊
| |-index.js // index模塊
| |-******** // 其他擴展模塊，不一一列舉
|-components // html子頁面
|-json // 模擬數據
|-index.html // 主頁面
```
> main.js為入口js，上手使用項目前最好先看看它的說明。
## 1.3.index.html結構說明 :id=declare
```html
<html>
<head>
<link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
<link rel="stylesheet" href="assets/module/admin.css"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!-- 頭部 -->
<div class="layui-header">...</div>
<!-- 側邊欄 -->
<div class="layui-side">...</div>
<!-- 主體部分 -->
<div class="layui-body">...</div>
<!-- 底部 -->
<div class="layui-footer">...</div>
</div>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
```
index.html就是這樣固定的結構，一般不需要修改，只用在components下寫子頁面即可。
## 1.4.添加一個菜單 :id=add_menu
1. 打開json/menus.json，在合適的位置添加一個菜單：
```json
{
"name": "xx管理",
"url": "#/xxx.html"
}
```
2. 在components下面新建一個xxx.html頁面
3. 運行index.html，查看效果
!> **注意：** url以"#/"開頭才會受路由控制，實現局部刷新。
## 1.5.main.js說明 :id=main_js
```javascript
layui.config({
base: 'assets/module/' // 配置layui擴展模塊目錄
}).extend({ // 配置每個模塊分別所在的目錄
notice: 'notice/notice',
step: 'step-lay/step'
}).use(['layer', 'element', 'config', 'index', 'admin', 'laytpl'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var element = layui.element;
var config = layui.config;
var index = layui.index;
var admin = layui.admin;
var laytpl = layui.laytpl;
// 加載側邊欄
admin.req('menus.json', {}, function (res) {
laytpl(sideNav.innerHTML).render(res, function (html) {
$('.layui-layout-admin>.layui-side .layui-nav').html(html);
element.render('nav');
});
index.regRouter(res); // 注冊路由
index.loadHome({ // 加載主頁
url: '#/console/console1',
name: '<i class="layui-icon layui-icon-home"></i>'
});
}, 'get');
// 移除loading動畫
setTimeout(function () {
admin.removeLoading();
}, 300);
});
```
- layui.config是告訴layui擴展模塊所在目錄
- layui.extend是配置每個模塊具體js位置
- admin.removeLoading()是移除頁面加載動畫
- 側邊欄通過ajax加載，然后注冊路由，加載主頁
 像`admin.js`、`index.js`這些沒有用子目錄存放的模塊不需要配置layui.extend，延時移除加載動畫是給切換主題預留時間。
!> **注意：** 只有注冊了路由，點擊"#/xxx"的時候，才能找到對應的地址并實現局部刷新
## 1.6.config模塊 :id=config
config模塊主要是用于給index模塊和admin模塊提供配置，可根據自己需要進行更改。
參數配置：
配置名 | 默認 | 說明
:---|:--- | :---
version | 312 | 版本號，加載子頁面會帶上,為true則隨機，意味著不會有緩存
base_server | 'json/' | 接口地址，admin.req方法會自動加
tableName | 'easyweb-spa' | 存儲表名
pageTabs | false | 是否開啟多標簽
openTabCtxMenu | true | 是否開啟Tab右鍵菜單
maxTabNum | 20 | 最多打開多少個tab
viewPath | 'components' | 視圖位置
viewSuffix | '.html' | 視圖后綴
defaultTheme | 'theme-admin' | 默認主題
reqPutToPost | true | req請求put方法變成post
cacheTab | true | 是否記憶Tab
方法：
配置名 | 默認
:---|:---
getToken() | 獲取token
putToken(token) | 緩存token
removeToken() | 清除token
getUser() | 獲取當前登錄的用戶信息
putUser(user) | 緩存當前登錄的用戶信息
getUserAuths() | 獲取用戶所有權限
getAjaxHeaders(requestUrl) | ajax請求的header
ajaxSuccessBefore(res, requestUrl) | ajax請求結束后的處理，返回false阻止代碼執行
routerNotFound(r) | 路由不存在處理
解決緩存問題配置version版本號在加載子頁面時會帶上版本號，為true會隨機生成，
如果config.js被緩存，請檢查main.js里面layui.config有沒有寫version: true。
