自研electron31+vite5+vue3+elementPlus通用后台权限系统
【摘要】 Electron-Admin桌面后台系统|vite5+vue3+electron前端后台框架
最新原创electron31+vite5+vue3 setup+pinia2+element-plus+echarts实战轻量级后台管理系统。内置4种通用布局模板,支持i18n国际化、动态路由权限,整合了表格、表单、图表、列表、编辑器等业务场景。
前段时间有分享一款electron31+vue3跨平台仿微信客户端聊天项目,这次带来全新原创研发的Vite5.x+Electron31纯手撸一款客户端后台管理系统Exe应用Electron31ViteAdmin。
https://bbs.huaweicloud.com/blogs/430667
vite5-electron31-admin内置4种经典布局模板,支持i18n国际化、动态路由权限、面包屑导航、多页签路由,实现了表格、表单、图表、列表、编辑器等常用功能模块。
技术栈
- 编辑器:VScode
- 框架技术:vite^5.3.4+vue^3.4.31+vue-router^4.4.0
- 跨端框架:electron^31.3.0
- 组件库:element-plus^2.7.8
- 状态管理:pinia^2.2.0
- 国际化方案:vue-i18n@9
- 图表组件:echarts^5.5.1
- markdown编辑器:md-editor-v3^4.18.0
- 模拟数据:mockjs^1.1.0
- 打包工具:electron-builder^24.13.3
- electron+vite桥接插件:vite-plugin-electron^0.28.7
项目结构框架
项目特性
- 最新前端技术栈electron31.x、vite5、vue3、elementPlus、vue-i18n、echarts
- 支持中英文/繁体国际化解决方案
- 支持动态权限路由、多页签缓存路由
- 封装多窗口管理器,内置4种通用布局模板、自由切换风格
- 整合通用的表格、表单、列表、图表、编辑器、错误处理等模块
Electron31-vue3Admin通用模板
如上图:提供了4个不同布局模板。
/**
* 通用布局模板
* @author Andy
*/
<script setup>
import { appState } from '@/pinia/modules/app'
// 引入布局模板
import Classic from './template/classic/index.vue'
import Columns from './template/columns/index.vue'
import Vertical from './template/vertical/index.vue'
import Horizontal from './template/horizontal/index.vue'
const appstate = appState()
const LayoutMap = {
'classic': Classic,
'columns': Columns,
'vertical': Vertical,
'horizontal': Horizontal
}
</script>
<template>
<div class="vuadmin__container" :style="{'--themeSkin': appstate.config.skin}">
<component :is="LayoutMap[appstate.config.layout]" />
</div>
</template>
electron+vue3国际化
/**
* 国际化配置
* @author YXY
*/
import { createI18n } from 'vue-i18n'
import { appState } from '@/pinia/modules/app'
// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'
// 默认语言
export const langVal = 'zh-CN'
export default async (app) => {
const appstate = appState()
const lang = appstate.lang || langVal
appstate.setLang(lang)
const i18n = createI18n({
legacy: false,
locale: lang,
messages: {
'en': enUS,
'zh-CN': zhCN,
'zh-TW': zhTW
}
})
app.use(i18n)
}
vue3图表化hooks
/**
* 动态图表Hook
*/
import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
export function useEcharts(el, options) {
let chartEl
let chartRef = ref(null)
let erd = elementResizeDetectorMaker()
const resizeHandle = () => {
chartEl && chartEl.resize()
}
onMounted(() => {
if(el?.value) {
chartEl = echarts.init(el.value)
chartEl.setOption(options)
chartRef.value = chartEl
}
erd.listenTo(el.value, resizeHandle)
})
onBeforeUnmount(() => {
chartEl.dispose()
erd.removeListener(el.value, resizeHandle)
})
return chartRef
}
vue3自定义多标签路由
<template>
<div class="vu__tabview">
<el-tabs
v-model="activeTab"
class="vu__tabview-tabs"
@tab-change="changeTabs"
@tab-remove="removeTab"
>
<el-tab-pane
v-for="(item, index) in tabList"
:key="index"
:name="item.path"
:closable="!item?.meta?.isAffix"
>
<template #label>
<el-dropdown ref="dropdownRef" trigger="contextmenu" :id="item.path" @visible-change="handleDropdownChange($event, item.path)" @command="handleDropdownCommand($event, item)">
<span class="vu__tabview-tabs__label">
<span>{{$t(item?.meta?.title)}}</span>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="refresh" :icon="Refresh">{{$t('tabview__contextmenu-refresh')}}</el-dropdown-item>
<el-dropdown-item command="close" :icon="Close" :disabled="item.meta.isAffix">{{$t('tabview__contextmenu-close')}}</el-dropdown-item>
<el-dropdown-item command="closeOther" :icon="Switch">{{$t('tabview__contextmenu-closeother')}}</el-dropdown-item>
<el-dropdown-item command="closeLeft" :icon="DArrowLeft">{{$t('tabview__contextmenu-closeleft')}}</el-dropdown-item>
<el-dropdown-item command="closeRight" :icon="DArrowRight">{{$t('tabview__contextmenu-closeright')}}</el-dropdown-item>
<el-dropdown-item command="closeAll" :icon="CircleCloseFilled">{{$t('tabview__contextmenu-closeall')}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup>
/**
* 自定义多页签 By Andy Q: 282310962
*/
import { onMounted, ref, computed, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Refresh, Close, Switch, DArrowLeft, DArrowRight, CircleCloseFilled } from '@element-plus/icons-vue'
import { isObject, isImg } from '@/utils'
import { useLink } from '@/hooks/useLink'
import { appState } from '@/pinia/modules/app'
const router = useRouter()
const route = useRoute()
const { jump } = useLink()
const { locale } = useI18n()
let { config: { keepAlive, tabRoutes, cacheRoutes }, updateConfig } = appState()
const dropdownRef = ref()
const activeTab = ref(route.path)
const tabList = ref(tabRoutes)
// 新增选项卡
const addTab = () => {
const index = tabList.value.findIndex(item => item?.path === activeTab.value)
if(index == -1) {
tabList.value.push({
path: route?.path,
name: route?.name,
meta: {
...route?.meta,
}
})
}
updateConfig('tabRoutes', tabList.value)
updateCacheRoutes()
}
// 删除选项卡
const removeTab = (path) => {
const index = tabList.value.findIndex(item => item?.path === path)
if(index > -1) {
tabList.value.splice(index, 1)
updateTabs(tabList.value)
}
}
// 删除左侧选项卡
const removeLeftTab = (path) => {
const index = tabList.value.findIndex(item => item?.path === path)
if(index > -1) {
tabList.value = tabList.value.filter((item, i) => item?.meta?.isAffix || i >= index)
updateTabs(tabList.value)
}
}
// 删除右侧选项卡
const removeRightTab = (path) => {
const index = tabList.value.findIndex(item => item?.path === path)
if(index > -1) {
tabList.value = tabList.value.filter((item, i) => item?.meta?.isAffix || i <= index)
updateTabs(tabList.value)
}
}
// 删除其它选项卡
const removeOtherTab = (path) => {
tabList.value = tabList.value.filter(item => item?.meta?.isAffix || item?.path === path)
updateTabs(tabList.value)
}
// 删除全部
const removeAllTab = (path) => {
tabList.value = tabList.value.filter(item => item?.meta?.isAffix)
updateTabs(tabList.value)
}
// 更新选项卡
const updateTabs = (tabs) => {
updateConfig('tabRoutes', tabs)
updateCacheRoutes()
const nextTab = tabs[tabs.length + 1] || tabs[tabs.length - 1]
if(!nextTab) return
jump(nextTab?.path)
}
// 更新keep-alive缓存
const updateCacheRoutes = () => {
let caches = tabList.value.filter(item => keepAlive || item?.meta?.isKeepAlive).map(item => item.name)
updateConfig('cacheRoutes', caches)
}
// 清空keep-alive缓存
const clearCacheRoutes = () => {
updateConfig('cacheRoutes', [])
}
// 点击选项卡
const changeTabs = (path) => {
jump(path)
}
// 右键菜单更新
const handleDropdownChange = (visible, name) => {
// 控制每次只显示一个右键菜单
if(!visible) return
dropdownRef.value.forEach(item => {
if(item.id === name) return
item.handleClose()
})
}
// 右键菜单命令
const handleDropdownCommand = (cmd, item) => {
const path = item?.path
switch(cmd) {
case 'refresh':
router.go(0)
break
case 'close':
removeTab(path)
break
case 'closeLeft':
removeLeftTab(path)
break
case 'closeRight':
removeRightTab(path)
break
case 'closeOther':
removeOtherTab(path)
break
case 'closeAll':
removeAllTab()
break
}
}
watch(() => route.path, () => {
activeTab.value = route.path
addTab()
}, {
immediate: true
})
</script>
作者:xiaoyan2017
链接:https://www.cnblogs.com/xiaoyan2017/p/18366451
来源:博客园
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)