Vue3.0 ElementPlus
Project setup
npm install
Start Mock Server
npm run mock
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
欢迎使用VUE3.0 + ElementPlus 后台管理模板
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
preview
在线预览地址：http://admin.tianleilei.cn/#/
开发过程中遇到问题以及解决方法
-
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
更新：
2021-01-09周六
新增配置化生成表单查询数据生成表格组件，以下为组件使用说明文档：
功能1：表单查询
表单支持类型：
- input
- select
- cascader
- date (date datetimerange)
表格支持功能：
字符串，图片预览（hover），json解析，数字解析，操作栏，select选择
功能预览图：
JsonTable预览图
以下为组件使用示例 以及配置项示例
<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监听事件 参数为当前选中项
表单查询属性：searchColumns Array
配置项说明：
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: []
}
]
table表格各属性：
- 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
}
}
});
});
}
};
2021-04-06周二
增加登录界面
主要变化文件如下图
image.png
由于之前组件设计问题，导致登录界面不太好加，所以找了一个比较trick的方案。将登录路由添加到页面中。
<template>
<div>
<router-view v-if="$route.path === '/login'"></router-view>
<layout v-else></layout>
</div>
</template>
持续更新中。。。比较慢。。。
网友评论