vue-real-admin多窗口后台模板
vue-real-admin 是一个多窗口后台模板，它流畅、易上手、提高生产力。
优点
- 上手简单：目录结构简单、0封装，代码与您坦诚相见
- 可扩展性：可扩展性强、几乎0封装的代码，实现了基础的后台操作；方便二次封装
- 示例全面：提供大量常见增删改查示例，提高你的生产力
需求提交
- 我们深知一个优秀的项目需要海纳百川，点我在线提交需求
依赖
axios、default-passive-events、 echarts、element-plus、vue、vue-router、vuex
开始使用
安装依赖
npm i
运行
npm rum dev
打包
npm rum build
贡献代码
- 在github上fork一份到自己的仓库
- clone自己的仓库到本地电脑
- 在本地电脑修改、commit、push
- 提交pr（点击：New Pull Request）（提交pr前请保证自己fork的仓库是最新版本，如若不是先强制更新一下）
- 等待合并
建议贡献的地方
- 更多登录模板
- 修复源码现有bug，或增加新的实用功能（比如：流畅的tab左右拖拽排序）
- 更多demo示例：比如针对element-ui一些复杂组件的示例，或者其它一些常见js库的集成使用
- 如果更新实用功能，可在文档友情链接处留下自己的推广链接
软件架构
src 应用部署目录
├─api 接口
├─assets 公共文件
├─components
│ ├─ActionButton. vue 列表表格头部按钮组件（未完成）
│ ├─BreadCrumb. vue 框架面包屑组件
│ ├─Home. vue 主框架组件（引用面包屑、菜单列表）
│ ├─JmTable. vue 列表页表格组件（引用表格tb）
│ ├─JmTb. vue 表格单元tb组件
│ ├─QueryForm. vue 表格头部搜索组件（未完成）
│ ├─TreeMenu. vue 菜单列表组件
│ ├─form
│ │ ├─JmInput. vue Input文件
│ │ ├─JmEnum. vue 选择框文件（未完成）
│ │ ├─list. vue 列表文件（未完成）
├─config 配置
├─router 路由管理
├─store
│ ├─index.js 用户状态文件
│ ├─mutations.js 业务层数据提交
├─utils
│ ├─request.js axios二次封装文件
│ ├─request.js Storage二次封装
├─views
│ ├─auth
│ │ ├─rule
│ │ │ ├─index. vue 列表页视图
│ │ │ ├─index.js 列表页js
│ │ │ ├─add. vue 添加页视图
│ │ │ ├─edit. vue 修改页视图
│ └─ ... 更多类库目录
软件视图效果
软件账号密码
默认账号：admin 默认密码：123456
接口文档
https://www.eolink.com/share/index?shareCode=7mEAG4
组件
表格组件
dataList: [],
columns: [
{label: "#", prop: "id", width: 150, type:"selection" },
{label: "名称", prop: "name", },
{label: "icon", prop: "icon", type:"icon" },
{label: "avatar", prop: "avatar", type:"avatar" },
{label: "count", prop: "count", type:"tc-num" },
{label: "money", prop: "money", type:"money" },
{label: "money", prop: "money", type:"money-f" },
{label: "rate", prop: "rate", type:"rate" },
{label: "intro", prop: "intro", type:"textarea" },
{label: "intro", prop: "intro", type:"rich-text" },
{label: "avatar", prop: "avatar", type:"link" },
{label: "avatar", prop: "avatar", type:"img" },
{label: "create_time", prop: "create_time", type:"date" },
{label: "datetime", prop: "create_time", type:"datetime" },
],//行参数
组件支持方法
- add
- edit
- del 自定义方法 1、打开JmTable组件，添加事件 2、通过 this.$parent.del(_id);调用父页面方法
表单组件
<JmInput jmname="普通输入：" v-model="form.name"></JmInput>
<JmInput type="num" jmname="数字输入：" v-model="form.age"></JmInput>
<JmInput type="password" jmname="密码输入：" v-model="form.password"></JmInput>
<JmInput type="textarea" jmname="多行输入：" v-model="form.name"></JmInput>
<JmInput type="date" jmname="日期输入：" v-model="form.createTime"></JmInput>
<JmInput type="datetime" jmname="日期时间：" v-model="form.createTime2"></JmInput>
<JmInput type="time" jmname="时间输入：" v-model="form.createTime3"></JmInput>
<in-list type="text-list" jmname="文本列表：" v-model="form.urlList"></in-list>
<JmInput type="slider" jmname="滑块参数：" v-model="form.widthValue"></JmInput>
<JmInput type="color" jmname="颜色选择：" v-model="form.color"></JmInput>
<JmInput type="rate" jmname="评分组件：" v-model="form.rate"></JmInput>
<JmInput type="money" jmname="金额输入：" v-model="form.moneyFen"></JmInput>
图片等，直接用element-plus自带的
例：
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="http://real-think.jmwl51.com//admin/Ajaxs/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="form.avatar" :src="form.avatar" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
接口调用方式
this.$api.getRule();
评论