# vue-admin

**Repository Path**: lig/vue-admin

## Basic Information

- **Project Name**: vue-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-05-16
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-admin

> 功能包含
- `自动创建简单的管理页面（查询+列表+操作）`
- `根据配置自动生成表单`
- `配置型的DataTable（支持分页、排序、固定列、筛选列、复杂表头等）`
- `Toaster组件`
- `Modal组件`

> 样式
vue-admin 样式语言使用的是Stylus，基于Vue2.0

**功能正在不断完善中**

## Build Setup

``` bash
# install dependencies
npm install

# run example
npm start
```

## 使用说明

1. 为了方便使用vue-admin中的各组件，可以在App.vue中引用 `StyleModule.vue` 模块来添加样式，如下所示
  ```vue
  <template>
    <div id="app">
      <style-module></style-module>
      <router-view/>
    </div>
  </template>
  
  <script>
    import StyleModule from './src/StyleModule.vue'
    export default {
      name: 'app',
      components: {StyleModule}
    }
  </script>
  ```
2. 组件中的Ajax请求，使用的是 `libs/ajax-service` 模块，在使用此模块前，需要调用此模块中的 `initApi` 方法来设置以下内容：  
  - **如何处理返回数据**
  - **请求的BaseUrl**  
  - **各请求前对请求相关配置的修改** 一般是为了给请求添加Authorization  

3. 对于本地缓存，组件中使用的是 `libs/storage` 模块。此模块提供基于Key的localStorage存取，具体逻辑可以直接看代码。

4. 在图片上传组件中，使用了 `libs/draggable` 模块，实现图片的拖动排序。此组件使用方法如下：
```vue
<tempate>
  <div>
    <draggable v-model="items">
      <div v-for="item in items">拖动待{{item}}</div>
    </draggable>
  </div>
</tempate>

<script>
import draggable from './src/libs/draggable/draggable'
export default {
  components: {draggable},
  data () {
    return {
      items: ['Item01', 'Item02', 'Item03']
    } 
  }
}
</script>
```

5. CRUD组件、DataGrid组件、DynamicForm组件、Modal组件、Toaster组件 使用方式见各模块中的`readme.md`