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 后臺(tái)管理模板
UI庫(kù)文檔： https://element-plus.gitee.io/#/zh-CN
該項(xiàng)目基于Vuecli 使用Vue3 + 最新版ElementPlus 構(gòu)建簡(jiǎn)單版后臺(tái)管理系統(tǒng)
基本功能：（Home頁(yè)面有詳細(xì)介紹可參考）
通過(guò)路由自動(dòng)生成側(cè)邊欄menu
打開(kāi)menu可以自動(dòng)生成標(biāo)簽頁(yè)
可以使用less變量控制激活顏色
還可以通過(guò)less變量控制主題色
有需要生成menu的路由單獨(dú)可以配置在一個(gè)文件寇壳，將不需要生成menu的路由配置在另外一個(gè)文件毛肋。
沒(méi)有權(quán)限系統(tǒng)玉工，沒(méi)有登錄功能等等。
簡(jiǎn)單汪诉，開(kāi)箱即用〈炒可以完全胡亂修改峰髓。可以作為Vue3項(xiàng)目基本參考完沪。
最后域庇，求個(gè)star。源碼地址：https://github.com/Mstian/Vue-Onepiece-Admin
在線預(yù)覽地址：http://admin.tianleilei.cn/#/
開(kāi)發(fā)過(guò)程中遇到問(wèn)題以及解決方法
scss in typescript （sass問(wèn)題較多覆积，現(xiàn)已采用less）
報(bào)錯(cuò)：Cannot find module ‘./index.module.scss‘ or its corresponding type declarations.ts(2307）
解決： 需要添加類(lèi)型聲明文件
https://blog.csdn.net/qq_41804324/article/details/109388570
https://juejin.cn/post/6844903560056930311遞歸組件
組件自身調(diào)用自身 參考sideBar組件pug(jade)模板
文檔：https://www.pugjs.cn/api/getting-started.htmlresolvePath
使用path模塊高效的處理路徑拼接watch 與watchEffect區(qū)別
watch不會(huì)立即執(zhí)行 watchEffect會(huì)立即執(zhí)行 并且可以手動(dòng)取消監(jiān)聽(tīng)新版transition使用
參考 layout /plan/src/layout/index.vue瀏覽器控制臺(tái)警告Source Map
https://blog.csdn.net/sundacheng1989/article/details/51118865瀏覽器控制臺(tái)警告 HMR API usage is out of date.
https://forum.vuejs.org/t/hmr-api-usage-is-out-of-date-mutiple-warnings/107633es-lint快速修復(fù)
npm run lint -- --fixvue-router4 404頁(yè)面*配置 參考router->defaultRouter.ts
typescript中導(dǎo)入模塊幾種方式
https://segmentfault.com/a/1190000018249137json-server mock數(shù)據(jù)
json-server文檔地址：https://github.com/typicode/json-server
更新：
2021-01-09周六
新增配置化生成表單查詢(xún)數(shù)據(jù)生成表格組件听皿，以下為組件使用說(shuō)明文檔：
功能1：表單查詢(xún)
表單支持類(lèi)型：
- input
- select
- cascader
- date (date datetimerange)
表格支持功能：
字符串，圖片預(yù)覽（hover）宽档，json解析尉姨，數(shù)字解析，操作欄雌贱，select選擇
功能預(yù)覽圖：
以下為組件使用示例 以及配置項(xiàng)示例
<JsonTable
:searchColumns="searchColumns"
:tableColumns="tableColumns"
:service="localService"
:options="tabOptions"
@onformchange="handlechange"
@rowselectchange="handleRowSelectChange"
>
<!-- 查詢(xún)表單與表格中間插槽 -->
<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: 表單查詢(xún)屬性配置
tableColumns: 查詢(xún)結(jié)果行字段配置
service: 請(qǐng)求啊送，主要是配置查詢(xún)請(qǐng)求
options: 表格設(shè)置
onformchange: 表單查詢(xún)項(xiàng)change事件監(jiān)聽(tīng) 參數(shù)為查詢(xún)屬性
rowselectchange: 帶有select的表格選擇時(shí)的select監(jiān)聽(tīng)事件 參數(shù)為當(dāng)前選中項(xiàng)
表單查詢(xún)屬性：searchColumns Array
配置項(xiàng)說(shuō)明：
label: String 表單項(xiàng)顯示名稱(chēng)
prop: String 表單項(xiàng)屬性（傳給后端的字段）
clearable: Boolean 表單項(xiàng)內(nèi)容是否可清除
placeholder: String 表單項(xiàng)placeholder
isSelect: Boolean 是否是select框（默認(rèn)是input）
options: Array Select框和Cascader的options
isCascader: Boolean 是否是級(jí)聯(lián)
isTime: String [date, datetimerange] 日期 或者日期時(shí)間范圍（默認(rèn)時(shí)間是Date格式內(nèi)部已做轉(zhuǎn)換處理為YYYY-MM-DD HH:MM:SS格式 如果需要時(shí)間戳格式可在組件源碼中自行修改）
配置示例：
[
{
label: '姓名',
prop: 'name',
clearable: true,
placeholder: "請(qǐng)輸入姓名"
},
{
label: '性別',
prop: 'sex',
clearable: true,
placeholder: "請(qǐng)選擇",
isSelect: true,
options: [
{
prop: 'male',
name: '男'
},
{
prop: 'female',
name: '女'
}
]
},
{
label: '技能',
prop: 'skill',
clearable: true,
placeholder: "請(qǐng)選擇",
isCascader: true,
options: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 布局"
},
{
value: "color",
label: "Color 色彩"
},
{
value: "typography",
label: "Typography 字體"
},
{
value: "icon",
label: "Icon 圖標(biāo)"
},
{
value: "button",
label: "Button 按鈕"
}
]
}
]
},
{
label: '出生日期',
prop: 'born',
clearable: true,
placeholder: "選擇日期",
isTime: 'date',
valueFormat: '',
defaultTime: []
}
]
table表格各屬性：
- options Object 表格展現(xiàn)形式配置
配置項(xiàng)說(shuō)明：
canCheck: Boolean 表格是否可勾選
hasIndex: Boolean 表格是否有序號(hào)
checkFixed: String [left right] 勾選checkbox固定位置
indexFixed: String [left right] 序號(hào)固定位置
opW: Number 操作欄寬度（當(dāng)操作欄按鈕較多時(shí)需要較寬寬度偿短，默認(rèn)為150）
autoRequest: Boolean 是否進(jìn)入頁(yè)面執(zhí)行一次數(shù)據(jù)請(qǐng)求 默認(rèn)為false
startUpdate: Date.now() // 監(jiān)聽(tīng)該項(xiàng)有變化時(shí)更新請(qǐng)求
配置示例：
{
canCheck: true, // 是否可選擇
hasIndex: true, // 是否有序號(hào)
checkFixed: 'left', // 選擇固定位置
indexFixed: 'left', // 表序號(hào)固定位置
opW: 150,// 操作欄寬度
autoRequest: true, // 自動(dòng)請(qǐng)求(第一次加載默認(rèn)請(qǐng)求)
startUpdate: Date.now()
}
- tableColumns 查詢(xún)結(jié)果行字段配置
屬性：tableColumns Array
配置項(xiàng)說(shuō)明：
prop: String 對(duì)應(yīng)后端返回表格數(shù)據(jù)字段
label: String 表格當(dāng)前列名稱(chēng)
width: Number 當(dāng)前列寬度
expandFunc: Boolean 是否有擴(kuò)展功能（擴(kuò)展功能包括圖片預(yù)覽，重寫(xiě)數(shù)據(jù)等等馋没，當(dāng)傳遞imgW昔逗，isMultiCell，render時(shí)該屬性必傳）
imgW: Number 圖片預(yù)覽時(shí)傳遞此參數(shù)篷朵，為預(yù)覽圖片寬度（圖片默認(rèn)是以tooltip展示的）
isMultiCell: Boolean 是否要重寫(xiě)數(shù)據(jù)（場(chǎng)景：后端返回json字符串勾怒，前端需要取其中某一個(gè)屬性，或者后端給的是0声旺，1這樣的標(biāo)識(shí)笔链，需要前端轉(zhuǎn)義為漢字 是 或者否）
render: Function 配合isMultiCell使用參數(shù)為當(dāng)前表格的行數(shù)據(jù)，可以return可渲染數(shù)據(jù)腮猖，可以參考配置示例
配置示例
[
{
prop: 'name',
label: '姓名',
width: 150,
overflow: true
},
{
prop: 'age',
label: '年齡',
width: 150,
overflow: true
},
{ // 圖片預(yù)覽
prop: 'avatar',
label: '頭像',
width: 150,
imgW: 300, // 設(shè)置該項(xiàng)表示預(yù)覽圖片
expandFunc: true // 是否有擴(kuò)展功能鉴扫，啟用表格列插槽
},
{
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: '市區(qū)',
width: 150,
overflow: true
},
{
prop: 'address',
label: '地址',
width: 150,
overflow: true
},
{
prop: 'loc',
label: '工位',
width: 150,
overflow: true
},
{
prop: 'createUser',
label: '創(chuàng)建人',
width: 150,
overflow: true
},
{
prop: 'auditUser',
label: '審核人',
width: 150,
overflow: true
},
{
prop: 'order',
label: '訂單號(hào)',
width: 150,
overflow: true
},
{ // 場(chǎng)景： 后端字段是json字符串，需要前端解析其中某個(gè)字段
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 "--";
}
},
{ // 場(chǎng)景： 后端字段是數(shù)字0或1, 前端需要自己將數(shù)字轉(zhuǎn)成漢字 比如0 待審核 1 已審核
prop: 'status',
label: '狀態(tài)（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 "--";
}
}
]
請(qǐng)求接口配置屬性
service Obejct
屬性用于請(qǐng)求接口的配置澈缺，用于在組件內(nèi)部進(jìn)行表格數(shù)據(jù)的請(qǐng)求 默認(rèn)是一個(gè)對(duì)象坪创，get屬性是默認(rèn)的請(qǐng)求，參數(shù)為如下格式
{
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); 這里是實(shí)際發(fā)請(qǐng)求的地方
return new Promise((resolve, reject) => {
resolve({
data: {
code: 0,
data: {
totalCount: 1,
list: tableData
}
}
});
});
}
};
2021-04-06周二
增加登錄界面
主要變化文件如下圖
由于之前組件設(shè)計(jì)問(wèn)題姐赡，導(dǎo)致登錄界面不太好加莱预，所以找了一個(gè)比較trick的方案。將登錄路由添加到頁(yè)面中项滑。
<template>
<div>
<router-view v-if="$route.path === '/login'"></router-view>
<layout v-else></layout>
</div>
</template>
持續(xù)更新中依沮。。枪狂。比較慢危喉。。摘完。
