前一段时间有给大家分享一个Electron+Vue3.x短视频,今天再分享最新开发的Electron桌面端后台系统。
vite2,electron12、element plus跨端后台框架 vite2-admin vue3-admin electron-vadmin 支持电脑、平板响应式布局。
饿了么前端团队出品的vue3桌面端UI组件库。
安装组件
npm i element-plus -S
快速使用
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
<template>
<WinBar zIndex="1000">
<template #wbtn>
<MsgMenu />
<Lang />
<a class="wbtn" title="换肤" @click="handleSkinWin"><i class="iconfont icon-huanfu"></i></a>
<Setting />
<a class="wbtn" title="刷新" @click="handleRefresh"><i class="iconfont el-icon-refresh"></i></a>
<a class="wbtn" :class="{'on': isAlwaysOnTop}" :title="isAlwaysOnTop ? '取消置顶' : '置顶'" @click="handleAlwaysTop"><i class="iconfont icon-ding"></i></a>
<Avatar @logout="handleLogout" />
</template>
</WinBar>
</template>
WinBar是顶部导航自定义组件,只需在具名插槽wbtn中使用相关标签即可自定义顶部图标内容。
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
import Store from './store'
// 引入公共配置
import gPlugins from './plugins'
import { winCfg, loadWin } from './windows/actions'
loadWin().then(config => {
winCfg.window = config
createApp(App).use(Router).use(Store).use(gPlugins).mount('#app')
})
/**
* 公共组件配置文件
* @author XiaoYan
*/
// 引入公共样式
import "@/assets/fonts/iconfont.css"
import "@/assets/css/common.scss"
// 引入elementPlus组件库
import ELPlus from "element-plus"
// 引入国际化配置
import VueI18n, { elPlusLang, getLang } from './i18n'
// 引入vue3自定义组件
import V3Layer from '@/components/v3layer'
import V3Scroll from '@/components/v3scroll'
// 引入公共组件模板
import WinBar from '@/components/winbar'
import WinBtn from '@/components/winbar/winbtn.vue'
import MacBtn from '@/components/winbar/macbtn.vue'
import Icon from '@/components/Icon'
import Utils from '@/utils'
import ElUtil from './elUtil'
const gPlugins = (app) => {
app.use(ELPlus, {
size: 'small',
locale: elPlusLang[getLang()]
})
app.use(VueI18n)
app.use(V3Layer)
app.use(V3Scroll)
// 注册公共组件
app.component('WinBar', WinBar)
app.component('WinBtn', WinBtn)
app.component('MacBtn', MacBtn)
app.component('Icon', Icon)
// 注入全局依赖
app.provide('utils', Utils)
app.provide('elUtil', ElUtil)
}
国际化方案使用的是vue-i18n插件。
新建一个locale目录用来存放国际化语言配置。
/**
* 国际化解决方案
* @author XiaoYan Q:282310962
*/
import { createI18n } from "vue-i18n"
import Storage from "@/utils/storage"
// 默认值
export const langKey = 'lang'
export const langVal = 'zh-CN'
/* elementPlus国际化配置 */
import enUS from "element-plus/lib/locale/lang/en"
import zhCN from "element-plus/lib/locale/lang/zh-cn"
import zhTW from "element-plus/lib/locale/lang/zh-tw"
export const elPlusLang = {
'en-US': enUS,
'zh-CN': zhCN,
'zh-TW': zhTW,
}
/* 初始化多语言 */
export const $messages = importAllLang()
export const $lang = getLang()
const i18n = createI18n({
legacy: false,
locale: $lang,
messages: $messages
})
/* 获取语言 */
export function getLang() {
const lang = Storage.get(langKey)
return lang || langVal
}
/**
* 持久化存储
* @param lang 语言类型 zh-CN / zh-TW / en-US
*/
export function setLang(lang, reload = false) {
if(getLang() !== lang) {
Storage.set(langKey, lang || '')
// 设置全局语言
// i18n.global.locale.value = lang
// 重载页面
if(reload) {
window.location.reload()
}
}
}
/**
* 自动化导入本地locale目录下语言配置
*/
export function importAllLang() {
const langModule = {}
try {
const localeCtx = require.context('@/locale', true, /([a-z]{2})-?([A-Z]{2})?\.js$/)
localeCtx.keys().map(path => {
const pathCtx = localeCtx(path)
if(pathCtx.default) {
const pathName = path.replace(/(.*\/)*([^.]+).*/ig, '$2')
if(langModule[pathName]) {
langModule[pathName] = {
...langModule[pathName], ...pathCtx.default
}
}else {
langModule[pathName] = pathCtx.default
}
}
})
} catch (error) {
console.log(error)
}
return langModule
}
新建一个layouts目录,用来存放一些布局模板。整个项目分为顶部导航、侧边栏、中间路由菜单、右侧主体内容
几个模块。
main布局模板
<template>
<div class="vadmin__wrapper" :style="{'--themeSkin': store.state.skin}">
<div v-if="!route.meta.isNewin" class="vadmin__layouts-main flexbox flex-col">
<!-- 顶部导航 -->
<div class="layout__topbar">
<TopNav />
</div>
<div class="layout__workpanel flex1 flexbox">
<!-- 侧边栏 -->
<div v-show="rootRouteEnable" class="panel__leftlayer">
<SideMenu :routes="mainRoutes" :rootRoute="rootRoute" />
</div>
<!-- 中间栏 -->
<div class="panel__middlelayer" :class="{'collapsed': collapsed}">
<RouteMenu
:routes="getAllRoutes"
:rootRoute="rootRoute"
:defaultActive="defaultActive"
:rootRouteEnable="rootRouteEnable"
/>
</div>
<!-- //右边栏 -->
<div class="panel__rightlayer flex1 flexbox flex-col">
<!-- 面包屑 -->
<BreadCrumb />
<v3-scroll autohide>
<div class="lay__container">
<permission :roles="route.meta.roles">
<template #tooltips>
<Forbidden />
</template>
<router-view></router-view>
</permission>
</div>
</v3-scroll>
</div>
</div>
</div>
<router-view v-else class="vadmin__layouts-main flexbox flex-col"></router-view>
</div>
</template>
行了,使用vite.js+electron开发前端后台管理系统就先分享到这里。希望大家能喜欢哈~~
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。