有什么正网站做兼职的,企业官网设计现状,网站建设公司中企动力推荐,网站建设改版原创自研Vue3Electron31ElementPlus桌面端轻量级后台管理Exe系统。 基于最新前端技术栈Vite5.x、Vue3、Electron31、ElementPlus、Vue-I18n、Echarts实战开发桌面端高颜值后台管理模板。内置4种布局模板#xff0c;支持i18n国际化、动态权限路由#xff0c;实现了表格、表单、…原创自研Vue3Electron31ElementPlus桌面端轻量级后台管理Exe系统。 基于最新前端技术栈Vite5.x、Vue3、Electron31、ElementPlus、Vue-I18n、Echarts实战开发桌面端高颜值后台管理模板。内置4种布局模板支持i18n国际化、动态权限路由实现了表格、表单、图表、列表、编辑器等常见的业务模块。 electron-viteadmin封装了多窗口管理支持同时开启多个窗体。 运用技术
编辑器vscode框架技术vite5.3vue3.4vue-router^4.4跨平台框架electron^31.3组件库element-plus^2.7.8状态管理pinia^2.2.0国际化方案vue-i18n9图表组件echarts^5.5.1markdown编辑器md-editor-v3^4.18.0模拟数据mockjs^1.1.0打包工具electron-builder^24.13.3 项目框架结构
electron-vue3admin 整合vite5electron技术采用vue3 setup语法编码。 目前electron-vue3admin已经同步到我的原创作品集欢迎下载使用。 自研Electron31Vue3ElementPlus桌面端后台管理系统 特性
最新前端技术栈electron31、vite5、vue3、elementPlus、vue-i18n、echarts支持中英文/繁体国际化解决方案支持动态权限路由、多页签缓存路由封装多窗口管理器内置4种通用布局模板、自由切换风格整合通用的表格、表单、列表、图表、编辑器、错误处理等模块高颜值UI界面、轻量级模块化、高定制性 electron主进程配置
import { app, BrowserWindow } from electronimport { WindowManager } from ../src/windows/index.js// 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy)
process.env[ELECTRON_DISABLE_SECURITY_WARNINGS] trueconst createWindow () {let win new WindowManager()win.create({isMajor: true})// 系统托盘管理win.trayManager()// 监听ipcMain事件win.ipcManager()
}app.whenReady().then(() {createWindow()app.on(activate, () {if(BrowserWindow.getAllWindows().length 0) createWindow()})
})app.on(window-all-closed, () {if(process.platform ! darwin) app.quit()
})vue3入口文件main.js
import { createApp } from vue
import ./style.scss
import App from ./App.vueimport { launchApp } from /windows/actions// 引入路由和状态配置
import Router from ./router
import Pinia from ./pinia// 引入插件配置
import Plugins from ./pluginslaunchApp().then(config {if(config) {console.log(窗口参数:, config)console.log(窗口id:, config?.id)// 全局存储窗口配置window.config config}// 初始化app应用实例createApp(App).use(Router).use(Pinia).use(Plugins).mount(#app)
})electron31-admin布局模板 提供了4种常用的布局模板。也可以根据需求定制化模板。 /*** 通用布局模板* author Andy Q282310962
*/script setupimport { appState } from /pinia/modules/app// 引入布局模板import Classic from ./template/classic/index.vueimport Columns from ./template/columns/index.vueimport Vertical from ./template/vertical/index.vueimport Horizontal from ./template/horizontal/index.vueconst appstate appState()const LayoutMap {classic: Classic,columns: Columns,vertical: Vertical,horizontal: Horizontal}
/scripttemplatediv classvuadmin__container :style{--themeSkin: appstate.config.skin}component :isLayoutMap[appstate.config.layout] //div
/templateelectronvue3国际化解决方案 采用vue-i18n国际化方案支持中文/英文/繁体三种语言。 /*** 国际化配置* 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-CNexport default async (app) {const appstate appState()const lang appstate.lang || langValappstate.setLang(lang)const i18n createI18n({legacy: false,locale: lang,messages: {en: enUS,zh-CN: zhCN,zh-TW: zhTW}})app.use(i18n)
}electronvue3封装图表 /*** 动态图表Hook*/import { onMounted, onBeforeUnmount, ref } from vue
import * as echarts from echarts
import elementResizeDetectorMaker from element-resize-detectorexport function useEcharts(el, options) {let chartEllet 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封装路由菜单 内置的4种布局模板提供了4种不同形式的路由菜单。
Menus :rootRouteEnablefalse /Menus rootRouteEnable :darktrue /Menus modehorizontal :darktrue /script setupimport { ref, computed } from vueimport { isObject, isArray, isImg } from /utilsimport { appState } from /pinia/modules/appimport { useRoutes } from /hooks/useRoutesconst props defineProps({// 菜单模式(vertical|horizontal)mode: { type: String, default: vertical },// 是否开启一级路由菜单rootRouteEnable: { type: Boolean, default: true },// 是否暗黑模式dark: { type: Boolean }})import Submenu from ./submenu.vue// 引入主路由表import routes from /router/modules/main.jsconst appstate appState()const { route, getActiveRoute, getCurrentRootRoute, getTreeRoutes } useRoutes()const activeRoute computed(() getActiveRoute(route))const rootRoute computed(() getCurrentRootRoute(route))const treeRoutes computed(() getTreeRoutes(routes))const filterRoutes computed(() {if(props.rootRouteEnable) {return treeRoutes.value}// 过滤一级路由菜单return treeRoutes.value.find(item item.path rootRoute.value item.children)?.children})
/scripttemplatediv classvu__menubar :class{is-dark: dark, is-collapsed: mode vertical appstate.config.collapsed}el-menu classvu__menus :default-activeactiveRoute :modemode :collapseappstate.config.collapsedSubmenuv-forroute in filterRoutes:keyroute.path:itemroute:rootRouterootRoute:rootRouteEnablerootRouteEnable//el-menu/div
/templatevue3自定义多标签tab路由 templatediv classvu__tabviewel-tabsv-modelactiveTabclassvu__tabview-tabstab-changechangeTabstab-removeremoveTabel-tab-panev-for(item, index) in tabList:keyindex:nameitem.path:closable!item?.meta?.isAffixtemplate #labelel-dropdown refdropdownRef triggercontextmenu :iditem.path visible-changehandleDropdownChange($event, item.path) commandhandleDropdownCommand($event, item)span classvu__tabview-tabs__labelspan{{$t(item?.meta?.title)}}/span/spantemplate #dropdownel-dropdown-menuel-dropdown-item commandrefresh :iconRefresh{{$t(tabview__contextmenu-refresh)}}/el-dropdown-itemel-dropdown-item commandclose :iconClose :disableditem.meta.isAffix{{$t(tabview__contextmenu-close)}}/el-dropdown-itemel-dropdown-item commandcloseOther :iconSwitch{{$t(tabview__contextmenu-closeother)}}/el-dropdown-itemel-dropdown-item commandcloseLeft :iconDArrowLeft{{$t(tabview__contextmenu-closeleft)}}/el-dropdown-itemel-dropdown-item commandcloseRight :iconDArrowRight{{$t(tabview__contextmenu-closeright)}}/el-dropdown-itemel-dropdown-item commandcloseAll :iconCircleCloseFilled{{$t(tabview__contextmenu-closeall)}}/el-dropdown-item/el-dropdown-menu/template/el-dropdown/template/el-tab-pane/el-tabs/div
/templatescript setupimport { onMounted, ref, computed, watch, nextTick } from vueimport { useRouter, useRoute } from vue-routerimport { useI18n } from vue-i18nimport { Refresh, Close, Switch, DArrowLeft, DArrowRight, CircleCloseFilled } from element-plus/icons-vueimport { isObject, isImg } from /utilsimport { useLink } from /hooks/useLinkimport { appState } from /pinia/modules/appconst 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) returnjump(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) returndropdownRef.value.forEach(item {if(item.id name) returnitem.handleClose()})}// 右键菜单命令const handleDropdownCommand (cmd, item) {const path item?.pathswitch(cmd) {case refresh:router.go(0)breakcase close:removeTab(path)breakcase closeLeft:removeLeftTab(path)breakcase closeRight:removeRightTab(path)breakcase closeOther:removeOtherTab(path)breakcase closeAll:removeAllTab()break}}watch(() route.path, () {activeTab.value route.pathaddTab()}, {immediate: true})
/script以上就是Electron31vue3 setupelementPlus开发桌面端中后台管理系统的一些知识分享整个项目涉及到的知识点还是蛮多的限于篇幅就先分享到这里。
https://blog.csdn.net/yanxinyun1990/article/details/140701208
https://blog.csdn.net/yanxinyun1990/article/details/140284304
https://blog.csdn.net/yanxinyun1990/article/details/138317354
