Electron-Vite2-VAdmin桌面端中后台管理系统（Electron-Vite2-VAdmin桌面端中后台管理系统）
之前有给大家分享一个electron跨平台短视频项目。今天再分享一个最新研发的vite2 electron桌面端后台管理系统框架ElectronViteVadmin。
Electron12仿抖音｜vite2 electron直播
electron-vite2-vadmin 一款整合vite2和electron技术的跨端管理系统。支持动态路由配置、国际化语言、权限控制、主题换肤、错误页提示等功能。
- 编码工具：vscode
- 构建工具：vite2 vue-cli-plugin-electron-builder
- vue3技术：vue3.0 vuex4 vue-router@4
- 跨端框架：electron^12.0.4
- UI组件库：element-plus^1.0.2 (饿了么vue3组件库)
- 表格拖拽：sortablejs^1.13.0
- 图表组件：echarts^5.1.1
- 国际化：vue-i18n^9.1.6
- 模拟数据：mockjs^1.1.0
实现了仿mac顶部导航栏效果，整合了多功能表格/表单功能，支持中英文/繁体语言。
采用标准的分层目录形式，目录结构清晰。
所有的页面组件均是使用vue3最新语法编码实现。样式是基于Sass的css预处理语言。
公共组件|插件配置新建一个plugins.js用来引入公共组件/插件。
/**
* 公共组件/插件配置文件
* @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)
}
新建一个i18n.js引入多语言配置。
/**
* 国际化配置 VueI18n util
* @author XiaoYan
*/
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
}
- 动态化标题hook
/**
* 动态化标题
* @author XiaoYan
*/
import { onMounted, watchEffect } from "vue"
import { useI18n } from "vue-i18n"
import store from "@/store"
export default function useTitle(route) {
if(!route.meta) return
const { t } = useI18n()
const defaultTitle = 'Electron-Vue3-Vadmin'
const Title = async () => {
if(route.meta.title) {
document.title = `${t(route.meta.title)} - ${defaultTitle}`
}else {
document.title = defaultTitle
}
}
watchEffect(Title)
onMounted(() => {
Title()
})
}
- 自定义图表hook
图表能够根据视图dom的改变而更新尺寸，使用了element-resize-detector组件。
/**
* 动态化图表Hook
* @author XiaoYan
*/
import { onMounted, onBeforeUnmount, ref } from "vue"
import * as echarts from "echarts"
import elementResizeDetectorMaker from "element-resize-detector"
import utils from "@/utils"
export default function useChart(refs, options) {
let chartInst
let chartRef = ref(null)
let erd = elementResizeDetectorMaker()
const handleResize = utils.debounce(() => {
chartInst.resize()
}, 100)
onMounted(() => {
if(refs.value) {
chartInst = echarts.init(refs.value)
chartInst.setOption(options)
chartRef.value = chartInst
}
erd.listenTo(refs.value, handleResize)
})
onBeforeUnmount(() => {
chartInst.dispose()
erd.removeListener(refs.value, handleResize)
})
return chartRef
}
Ok，今天的分享就暂时先到这里，后面还会分享一些技术知识。
如果小伙伴们有其它的建议想法，欢迎一起交流分享哈！
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
