整合vite2+electron12撸后台管理系统

原创

andy2018

修改于 2021-05-19 11:40:15

1.7K0

修改于 2021-05-19 11:40:15

文章被收录于专栏：h5h5

Vite2ElectronAdmin 一款精美UI跨平台前端后台管理系统框架。

前一段时间有给大家分享一个Electron+Vue3.x短视频，今天再分享最新开发的Electron桌面端后台系统。

vite2，electron12、element plus跨端后台框架 vite2-admin vue3-admin electron-vadmin 支持电脑、平板响应式布局。

特点

支持PC及平板端响应式布局
使用最新前端技术Vite2.1.5、Vue3.x、Electron12、Element Plus、Vue-i18n、Echarts5.x
支持组件式+指令式两种权限认证方式
支持中文/繁体/英文三种国际化方案
支持表格拖拽排序、全屏、树形表格等功能
支持多主题换肤切换

技术栈

构建技术：vite.js
vue3技术：vue3 / vuex4 / vue-router@4
跨端框架：electron^12.0.4
打包工具：vue-cli-plugin-electron-builde
UI组件库：element-plus^1.0.2
表格拖拽：sortablejs^1.13.0
图表组件：echarts^5.1.1
国际化：vue-i18n^9.1.6
模拟数据：mockjs^1.1.0

项目结构目录

Vue3桌面端组件库

饿了么前端团队出品的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')

Electron仿mac桌面导航栏

<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中使用相关标签即可自定义顶部图标内容。

vite.js入口配置

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')
})

自定义公共配置Plugin.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)
}

Vue3国际化方案

国际化方案使用的是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
}

Vue3模板布局

新建一个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 删除。

electron

vue.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

electron

vue.js

登录后参与评论

0 条评论

热度