之前有给大家分享一个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)
}

国际化Vue-I18n

新建一个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
}

Vue3自定义hooks

• 动态化标题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，今天的分享就暂时先到这里，后面还会分享一些技术知识。

如果小伙伴们有其它的建议想法，欢迎一起交流分享哈！