# sagacloud-admin

> A Vue.js project

## Build Setup

```bash
# install dependencies
npm install
npm install vuex axios element-ui echarts font-awesome

# serve with hot reload at localhost:8080
npm run dev
npm install less less-loader node-sass sass-loader --save-dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

#### 目录结构

```
├─api                       服务端接口API
│
├─components                通用组件
│
├─data                      静态数据
│      menus.js             页面菜单文件,在这里新增菜单
│
├─framework                 页面框架, 不用修改
│
├─plugins                   通用插件
│
├─router                    路由
│      index.js
│      sagacloud.js         业务路由文件,在这里新增路由
│
├─store                     VUEX
│      index.js
│
├─utils                     通用工具类
│      authutils.js         认证工具, 不要修改
│      basicutils.js
│      httputils.js
│      storage.js
│
└─views                     业务视图主目录, 这里创建新视图
    ├─dasboard
    └─system
```

#### 工具类说明

/src/utils/basicutils.js

```
    formatDateByPattern(date, pattern) // 日期格式化
    indexInArray(arr, key, val)        // 找出数组arr中第一个属性key的值等于val的元素的下标
    itemInArray(arr, key, val)         // 找出数组arr中第一个属性key的值等于val的元素
    deleteInArray(arr, key, val)       // 从数组中将属性key的值等于val的所有元素删除
```

/src/utils/httputils.js // 一般在服务端接口 API 中使用,不建议在别的地方使用,有授权标记

```
    getCookie(name)                    // 获取cookie值
    getJson(url, params)               // 发送GET请求
    postJson(url, data)                // 发送POST请求
```

/src/utils/storage.js

```
    set(key, value, fn)                // 在浏览器缓存中设置数据, 如果value是对象会转化成json
    get(key, fn)                       // 在浏览器缓存中取出数据, 取出数据后会尝试js对象返回
    remove(key)                        // 在浏览器缓存中删除数据
```

#### 设置面包屑方法

新方法

```
在路由router中配置meta.breadcrumbs,在进入路由页面时会自动解析为面包屑
```

下面的方法不再推荐使用

```
    this.$store.dispatch('setBreadcrumb', [{ label: 'Demo' }, { label: 'Form' }])
```