基于vue3 + element plus的后台管理系统

jw-admin

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

码云地址： https://gitee.com/mubug/jw-admin
预览地址：https://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	服务器请求路径
sysColor	系统配置信息 主要是颜色
otherRoutes	不出现在左侧导航栏显示的路由页面 数组
navs	出现在左侧的路由页面 数组

navs 出现在左侧的路由页面

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

 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 引入文件

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

2、注册使用

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

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

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

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

名称	类型	说明
tableData	Object	分页表格需要的对象数据
reqUrl	String	表格请求的远程地址
auto	String	是否自动请求接口 ，需要设置true才能自动
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渲染

示例：

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" }
        ]
    }