# jw-admin 基于vue3+element plus的后台管理系统

**Repository Path**: rok138/jw-admin

## Basic Information

- **Project Name**: jw-admin 基于vue3+element plus的后台管理系统
- **Description**: 基于vue3  element plus的后台管理系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: v-2
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-05-14
- **Last Updated**: 2021-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jw-admin

该项目 基于vue3  + element plus ，目前还处于前期阶段，有许多功能和细节还没搞好



预览地址：http://jw-admin.mqbug.cn/home

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```





#### 快速上手

1. 在  **admin.config.js**  配置需要的路由信息
2. 在  **views**  文件夹下面新建需要的页面



#### 文件夹结构（其他是基本的vue-cli结构

| 名称       | 描述                            |
| ---------- | ------------------------------- |
| admin      | 系统配置设置文件 ；建议不要改动 |
| api        | api接口文件夹                   |
| components | 自定义组件文件夹                |



#### 配置文件 admin.config.js

系统配置文件

| 名称    | 描述                    |
| ------- | ----------------------- |
| name    | 系统显示名称            |
| baseUrl | 服务器请求路径          |
| webInfo | 系统配置信息 主要是颜色 |
|otherRoutes|不出现在左侧导航栏显示的路由页面 数组|
|navs|出现在左侧的路由页面 数组|



#### 路由

**otherRoutes     不出现在左侧导航栏显示的路由页面**

```javascript
 otherRoutes: [
        {
            path: "/", name: "", redirect: "/home",
            component: () => import('@/views/welcome.vue'),
        },
        {
            path: "/login", name: "login",
            component: () => import('@/views/login.vue'),
        },
    ],
```



**navs        出现在左侧的路由页面**

|   名称    | 说明                                    |
| :-------: | :-------------------------------------- |
|   path    | 跳转路径                                |
|   name    | 唯一name值                              |
|   title   | 显示名称                                |
|   icon    | 显示图标（element带的icon               |
| component | 显示的页面路径                          |
| children  | 代表存在子选项（数组                    |
|  isHide   | 是否在左侧导航栏隐藏（默认不设置为false |

```javascript
 navs: [
     {
            path: "/sonProject", name: "sonProject", isShow: true,
            component: () => import('@/views/sonProject.vue'),
        },
        {
            path: "/home", name: "home", title: "首页", icon: "el-icon-monitor",
            component: () => import('@/views/welcome.vue'),
        },
        {
            path: "/project", name: "project", title: "项目管理", icon: "el-icon-files",
            component: () => import('@/views/project.vue'),
            children: [
                {
                    path: "/project", name: "project", title: "项目管理", icon: "el-icon-files",
                    component: () => import('@/views/project.vue'),
                    children: [
                        {
                            path: "/project", name: "project", title: "项目管理", icon: "el-icon-files",
                            component: () => import('@/views/project.vue'),
                        }
                    ]
                },

            ]
        },
    ]
```



#### 请求

api 文件夹下面的 index.js 文件封装 有拦截器 可以不修改直接使用





### 组件（components 文件夹下面



#### 分页表格组件  （pages-tables

##### 使用步骤

1、js 引入文件

```JavaScript
import tables from "../components/page-tables";
```

2、注册使用

```js
  components: {
    tables //注册table组件
  },
```

3、在页面使用表格组件  绑定对应的数据

```html
 <tables :tableData="tableData"></tables>
```

4、在js中配置 需要的 **tableData **数据

| 名称                       | 类型     | 说明                                                         |
| :------------------------- | -------- | ------------------------------------------------------------ |
| tableData                  | Object   | 分页表格需要的对象数据                                       |
| reqUrl                     | String   | 表格请求的远程地址                                           |
| operaData                  | Object   | 操作按钮数据                                                 |
| operaData -->data          | Array    | 按钮数组                                                     |
| operaData -->data-->label  | String   | 按钮名称                                                     |
| operaData -->data-->type   | String   | 按钮样式  （primary / success / warning / danger / info / text |
| operaData -->data-->method |          | 按钮点击的事件                                               |
| columnData                 | Array    | 表格需要显示的数据                                           |
| columnData-->prop          | String   | 表格显示数据的 字段 根据接口返回的数据                       |
| columnData-->label         | String   | 显示的标题                                                   |
| columnData-->align         | String   | 对齐方式（left/center/right                                  |
| columnData-->width         | string   | 对应列的宽度                                                 |
| columnData-->render        | Function | 自定义扩展样式，vue的render渲染                              |

示例：

```javascript
tableData: {
  reqUrl: "http://rap2.taobao.org:38080/app/mock/data/1680155",
  operaData: {
      data: [
      { label: "删除", type: "danger", method: (index, row) => { this.del(index, row) }},
      { label: "增加", type: "primary", method: (index, row) => { this.add(index, row) }},
      { label: "其他", type: "info", method: (index, row) => { this.edit(index, row) } }]
    },
   columnData: [
          { prop: "name", label: "名字", align: "center" },
          { prop: "content", label: "内容", align: "center" },
          {
            prop: "times", label: "次数", width: 200, align: "center", 
            render: (h, params) => {
              return h("el-rate", { attrs: { value: params.row.times, disabled: true } })
            }
          },
          { prop: "time_c", label: "时间", align: "center" }
        ]
    }
```