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

前一段時間有給大家分享一個Electron+Vue3.x短視頻,今天再分享最新開發的Electron桌面端后臺系統。

vite2,electron12、element plus跨端后臺框架 vite2-admin vue3-admin electron-vadmin 支持電腦、平板響應式布局。

特點

1. 支持PC及平板端響應式布局
2. 使用最新前端技術Vite2.1.5、Vue3.x、Electron12、Element Plus、Vue-i18n、Echarts5.x
3. 支持組件式+指令式兩種權限認證方式
4. 支持中文/繁體/英文三種國際化方案
5. 支持表格拖拽排序、全屏、樹形表格等功能
6. 支持多主題換膚切換

技術棧

• 構建技術: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  title="換膚" @click="handleSkinWin"><i ></i></a>            <Setting />            <a  title="刷新" @click="handleRefresh"><i ></i></a>            <a  : :title="isAlwaysOnTop ? '取消置頂' : '置頂'" @click="handleAlwaysTop"><i ></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"http:// 引入elementPlus組件庫import ELPlus from "element-plus"http:// 引入國際化配置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"http:// 默認值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>    <p  :style="{'--themeSkin': store.state.skin}">        <p v-if="!route.meta.isNewin" >            <!-- 頂部導航 -->            <p >                <TopNav />            </p>                        <p >                <!-- 側邊欄 -->                <p v-show="rootRouteEnable" >                    <SideMenu :routes="mainRoutes" :rootRoute="rootRoute" />                </p>                <!-- 中間欄 -->                <p  :>                    <RouteMenu                         :routes="getAllRoutes"                         :rootRoute="rootRoute"                         :defaultActive="defaultActive"                         :rootRouteEnable="rootRouteEnable"                     />                </p>                <!-- //右邊欄 -->                <p >                    <!-- 面包屑 -->                    <BreadCrumb />                                        <v3-scroll autohide>                        <p >                            <permission :roles="route.meta.roles">                                <template #tooltips>                                    <Forbidden />                                </template>                                <router-view></router-view>                            </permission>                        </p>                    </v3-scroll>                </p>            </p>        </p>        <router-view v-else ></router-view>    </p></template>

行了,使用vite.js+electron開發前端后臺管理系統就先分享到這里。希望大家能喜歡哈~~