源码地址:https://github.com/Mstian/Vue-Onepiece-Admin
npm install
npm run mock
npm run serve
npm run build
UI库文档: https://element-plus.gitee.io/#/zh-CN
该项目基于Vuecli 使用Vue3 + 最新版ElementPlus 构建简单版后台管理系统
基本功能:(Home页面有详细介绍可参考) 通过路由自动生成侧边栏menu 打开menu可以自动生成标签页 可以使用less变量控制激活颜色 还可以通过less变量控制主题色
有需要生成menu的路由单独可以配置在一个文件,将不需要生成menu的路由配置在另外一个文件。 没有权限系统,没有登录功能等等。
简单,开箱即用。可以完全胡乱修改。可以作为Vue3项目基本参考。
最后,求个star。源码地址:https://github.com/Mstian/Vue-Onepiece-Admin
-
scss in typescript (sass问题较多,现已采用less) 报错:
Cannot find module ‘./index.module.scss‘ or its corresponding type declarations.ts(2307)
解决: 需要添加类型声明文件 https://blog.csdn.net/qq_41804324/article/details/109388570 https://juejin.cn/post/6844903560056930311 -
递归组件 组件自身调用自身 参考sideBar组件
-
pug(jade)模板 文档:https://www.pugjs.cn/api/getting-started.html
-
resolvePath 使用path模块高效的处理路径拼接
-
watch 与watchEffect区别 watch不会立即执行 watchEffect会立即执行 并且可以手动取消监听
-
新版transition使用 参考 layout /plan/src/layout/index.vue
-
浏览器控制台警告Source Map https://blog.csdn.net/sundacheng1989/article/details/51118865
-
浏览器控制台警告 HMR API usage is out of date. https://forum.vuejs.org/t/hmr-api-usage-is-out-of-date-mutiple-warnings/107633
-
es-lint快速修复 npm run lint -- --fix
-
vue-router4 404页面*配置 参考router->defaultRouter.ts
-
typescript中导入模块几种方式 https://segmentfault.com/a/1190000018249137
-
json-server mock数据 json-server文档地址:https://github.com/typicode/json-server
新增配置化生成表单查询数据生成表格组件,以下为组件使用说明文档:
表单支持类型:
- input
- select
- cascader
- date (date datetimerange)
表格支持功能: 字符串,图片预览(hover),json解析,数字解析,操作栏,select选择
以下为组件使用示例 以及配置项示例
<JsonTable
:searchColumns="searchColumns"
:tableColumns="tableColumns"
:service="localService"
:options="tabOptions"
@onformchange="handlechange"
@rowselectchange="handleRowSelectChange"
>
<!-- 查询表单与表格中间插槽 -->
<template v-slot:under-search-slot>
<div>
<el-button size="mini" type="primary">新增</el-button>
</div>
</template>
<!-- 操作栏插槽 -->
<template v-slot:op="scope">
<el-button type="danger" size="mini" @click="handleDelete(scope)">删除</el-button>
<el-button type="primary" size="mini" @click="handleCheck(scope)">查看</el-button>
</template>
</JsonTable>
Props:
searchColumns
: 表单查询属性配置
tableColumns
: 查询结果行字段配置
service
: 请求,主要是配置查询请求
options
: 表格设置
onformchange
: 表单查询项change事件监听 参数为查询属性
rowselectchange
: 带有select的表格选择时的select监听事件 参数为当前选中项
配置项说明:
label
: String 表单项显示名称
prop
: String 表单项属性(传给后端的字段)
clearable
: Boolean 表单项内容是否可清除
placeholder
: String 表单项placeholder
isSelect
: Boolean 是否是select框(默认是input)
options
: Array Select框和Cascader的options
isCascader
: Boolean 是否是级联
isTime
: String [date, datetimerange] 日期 或者日期时间范围(默认时间是Date格式内部已做转换处理为YYYY-MM-DD HH:MM:SS格式 如果需要时间戳格式可在组件源码中自行修改)
配置示例:
[
{
label: '姓名',
prop: 'name',
clearable: true,
placeholder: "请输入姓名"
},
{
label: '性别',
prop: 'sex',
clearable: true,
placeholder: "请选择",
isSelect: true,
options: [
{
prop: 'male',
name: '男'
},
{
prop: 'female',
name: '女'
}
]
},
{
label: '技能',
prop: 'skill',
clearable: true,
placeholder: "请选择",
isCascader: true,
options: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 布局"
},
{
value: "color",
label: "Color 色彩"
},
{
value: "typography",
label: "Typography 字体"
},
{
value: "icon",
label: "Icon 图标"
},
{
value: "button",
label: "Button 按钮"
}
]
}
]
},
{
label: '出生日期',
prop: 'born',
clearable: true,
placeholder: "选择日期",
isTime: 'date',
valueFormat: '',
defaultTime: []
}
]
- options Object 表格展现形式配置
配置项说明:
canCheck
: Boolean 表格是否可勾选
hasIndex
: Boolean 表格是否有序号
checkFixed
: String [left right] 勾选checkbox固定位置
indexFixed
: String [left right] 序号固定位置
opW
: Number 操作栏宽度(当操作栏按钮较多时需要较宽宽度,默认为150)
autoRequest
: Boolean 是否进入页面执行一次数据请求 默认为false
startUpdate
: Date.now() // 监听该项有变化时更新请求
配置示例:
{
canCheck: true, // 是否可选择
hasIndex: true, // 是否有序号
checkFixed: 'left', // 选择固定位置
indexFixed: 'left', // 表序号固定位置
opW: 150,// 操作栏宽度
autoRequest: true, // 自动请求(第一次加载默认请求)
startUpdate: Date.now()
}
- tableColumns 查询结果行字段配置 属性:tableColumns Array
配置项说明:
prop
: String 对应后端返回表格数据字段
label
: String 表格当前列名称
width
: Number 当前列宽度
expandFunc
: Boolean 是否有扩展功能(扩展功能包括图片预览,重写数据等等,当传递imgW,isMultiCell,render时该属性必传)
imgW
: Number 图片预览时传递此参数,为预览图片宽度(图片默认是以tooltip展示的)
isMultiCell
: Boolean 是否要重写数据(场景:后端返回json字符串,前端需要取其中某一个属性,或者后端给的是0,1这样的标识,需要前端转义为汉字 是 或者否)
render
: Function 配合isMultiCell使用参数为当前表格的行数据,可以return可渲染数据,可以参考配置示例
配置示例
[
{
prop: 'name',
label: '姓名',
width: 150,
overflow: true
},
{
prop: 'age',
label: '年龄',
width: 150,
overflow: true
},
{ // 图片预览
prop: 'avatar',
label: '头像',
width: 150,
imgW: 300, // 设置该项表示预览图片
expandFunc: true // 是否有扩展功能,启用表格列插槽
},
{
prop: 'sex',
label: '性别',
width: 150,
overflow: true
},
{
prop: 'born',
label: '出生日期',
width: 150,
overflow: true
},
{
prop: 'phone',
label: '电话',
width: 150,
overflow: true
},
{
prop: 'zip',
label: '邮编',
width: 150,
overflow: true
},
{
prop: 'province',
label: '省份',
width: 150,
overflow: true
},
{
prop: 'city',
label: '市区',
width: 150,
overflow: true
},
{
prop: 'address',
label: '地址',
width: 150,
overflow: true
},
{
prop: 'loc',
label: '工位',
width: 150,
overflow: true
},
{
prop: 'createUser',
label: '创建人',
width: 150,
overflow: true
},
{
prop: 'auditUser',
label: '审核人',
width: 150,
overflow: true
},
{
prop: 'order',
label: '订单号',
width: 150,
overflow: true
},
{ // 场景: 后端字段是json字符串,需要前端解析其中某个字段
prop: 'jsonStr',
label: 'json解析',
width: 150,
overflow: true,
expandFunc: true,
isMultiCell: true,
render: (scope) => {
if (JSON.stringify(scope.row) !== '{}') {
return JSON.parse(scope.row.jsonStr).json;
}
return "--";
}
},
{ // 场景: 后端字段是数字0或1, 前端需要自己将数字转成汉字 比如0 待审核 1 已审核
prop: 'status',
label: '状态(0 1)',
width: 150,
overflow: true,
expandFunc: true,
isMultiCell: true,
render: (scope) => {
let status = scope.row.status;
if( status === 0) {
return "待审核";
} else if(status === 1) {
return "已审核";
}
return "--";
}
}
]
service Obejct 属性用于请求接口的配置,用于在组件内部进行表格数据的请求 默认是一个对象,get属性是默认的请求,参数为如下格式
{
page: 1,
psize: 2,
params: {
name: 'leilei',
age: 18
}
}
export const localService = {
/**
* {
* page: 1,
* psize: 20,
* params: {}
* }
*/
get(data) {
console.log(data);
// return axios.get(url, data); 这里是实际发请求的地方
return new Promise((resolve, reject) => {
resolve({
data: {
code: 0,
data: {
totalCount: 1,
list: tableData
}
}
});
});
}
};
增加登录界面
主要变化文件如下图
由于之前组件设计问题,导致登录界面不太好加,所以找了一个比较trick的方案。将登录路由添加到页面中。
<template>
<div>
<router-view v-if="$route.path === '/login'"></router-view>
<layout v-else></layout>
</div>
</template>
持续更新中。。。比较慢。。。