Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Time:2021-9-8

System introduction

vite2-electron-adminA set of lightweight middle and background system solutions. It integratesvite.js + electron12Development and implementation. Using the latest front-end technology stack,It includes I18N international language, dynamic permission routing, and provides multi-functional tables / formsBusiness functions.

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Technical framework

  • Vue3 Technology: vite. JS + vue3.0 + vuex4 + Vue- [email protected]
  • Span end frame: electron ^ 12.0.4
  • Packaging tool: Vue cli plugin electron builder
  • UI component library: element plus (hungry vue3 Component Library)
  • Table drag: sortablejs
  • Chart component: eckarts ^ 5.1.1
  • Internationalization: vue-i18n ^ 9.1.6
  • Simulation data: mockjs

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

The project structure is as follows

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

features

  1. Support PC and tablet adaptive layout
  2. Latest front-end technologies vite2, vue3, electron12, element plus, vue-i18n, echarts5. X
  3. It supports two authorization authentication methods: component type and instruction type
  4. Support Chinese English / traditional internationalization scheme
  5. Support table drag and drop sorting, full screen, tree table and other functions
  6. Support multi theme skin change switching

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electronic vite admin also supports the opening of new multiple windows. Take the following skin changing windows as an example. There have been relevant sharing articles before, which will not be introduced in detail here.

import { createWin } from '@/windows/actions'

//Skin changing window
const handleOpenTheme = () => {
    createWin({
        Title: 'theme skin change',
        route: '/skin',
        width: 750,
        height: 480,
    })
}

Electronic + vite MAC style navigation bar

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

As shown in the above figure: in order to ensure the consistency of the project UI, the top navigation bar is implemented with custom components, which is somewhat similar to MAC navigation.

<template>
    <WinBar zIndex="1000">
        <template #wbtn>
            <MsgMenu />
            <Lang />
            < a class = "wbtn" title = "skin change" @ Click = "handleskinwin" > < I class = "iconfont icon Huanfu" > < / I ></a>
            <Setting />
            < a class = "wbtn" title = "Refresh" @ Click = "handlerefresh" > < I class = "iconfont El icon refresh" > < / I ></a>
            <a class="wbtn" :class="{'on': isAlwaysOnTop}" :title="isAlwaysOnTop ? ' Cancel topping ':' topping '"@ Click =" handlealwaystop "> < I class =" iconfont icon Ding "> < / I ></a>
            <Avatar @logout="handleLogout" />
        </template>
    </WinBar>
</template>

As for the specific implementation method, I won’t introduce it too much here. There have been some related sharing articles before.

Entry page main.js

/**
 *Rendering process main portal
 * @author XiaoYan
 */
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
import Store from './store'

//Introduce public configuration
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')
})

Introduce the common component plugin.js

/**
 *Common component / plug-in configuration file
 * @author XiaoYan
 */

//Introducing public styles
import "@/assets/fonts/iconfont.css"
import "@/assets/css/common.scss"

//Introducing elementplus component library
import ELPlus from "element-plus"

//Introduce international configuration
import VueI18n, { elPlusLang, getLang } from './i18n'

//Introducing vue3 custom components
import V3Layer from '@/components/v3layer'
import V3Scroll from '@/components/v3scroll'

//Import common component template
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)

    //Register public components
    app.component('WinBar', WinBar)
    app.component('WinBtn', WinBtn)
    app.component('MacBtn', MacBtn)
    app.component('Icon', Icon)

    //Inject global dependencies
    app.provide('utils', Utils)
    app.provide('elUtil', ElUtil)
}

Internationalization configuration vue-i18n

Create a new i18n.js to introduce international language configuration.

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

/**
 *Configuring vuei18n util for Internationalization
 * @author XiaoYan  Q:282310962
 */

import { createI18n } from "vue-i18n"
import Storage from "@/utils/storage"

//Default value
export const langKey = 'lang'
export const langVal = 'zh-CN'

/*Elementplus internationalization configuration*/
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,
}

/*Initialize multilingual*/
export const $messages = importAllLang()
export const $lang = getLang()
const i18n = createI18n({
    legacy: false,
    locale: $lang,
    messages: $messages
})

/*Get language*/
export function getLang() {
    const lang = Storage.get(langKey)
    return lang || langVal
}

/**
 *Persistent storage
 *@ param Lang language type zh CN / zh TW / en US
 */
export function setLang(lang, reload = false) {
    if(getLang() !== lang) {
        Storage.set(langKey, lang || '')
        //Set global language
        // i18n.global.locale.value = lang

        //Reload page
        if(reload) {
            window.location.reload()
        }
    }
}

/**
 *Automatically import the language configuration under the local locale directory
 */
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
}

Project template layout

The project layout is divided into two main modules: auth and main.

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template

  • Auth module template
<template>
    <div class="vadmin__wrapper">
        <router-view class="vadmin__layouts-auth"></router-view>
    </div>
</template>

<script>
import { useRoute } from "vue-router"
import useTitle from '@/hooks/useTitle'

export default {
    components: {},
    setup() {
        const route = useRoute()

        //Set title
        useTitle(route)
    }
}
</script>
  • Main module template
<template>
    <div class="vadmin__wrapper" :style="{'--themeSkin': store.state.skin}">
        <div v-if="!route.meta.isNewin" class="vadmin__layouts-main flexbox flex-col">
            <!--  Top navigation -- >
            <div class="layout__topbar">
                <TopNav />
            </div>
            
            <div class="layout__workpanel flex1 flexbox">
                <!--  Sidebar -- >
                <div v-show="rootRouteEnable" class="panel__leftlayer">
                    <SideMenu :routes="mainRoutes" :rootRoute="rootRoute" />
                </div>

                <!--  Middle bar -- >
                <div class="panel__middlelayer" :class="{'collapsed': collapsed}">
                    <RouteMenu 
                        :routes="getAllRoutes" 
                        :rootRoute="rootRoute" 
                        :defaultActive="defaultActive" 
                        :rootRouteEnable="rootRouteEnable" 
                    />
                </div>

                <!-- // Right sidebar -- >
                <div class="panel__rightlayer flex1 flexbox flex-col">
                    <!--  Breadcrumbs -- >
                    <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>

Chart hook

To simplify chart calls, encapsulate a chart hooks. The element resize detector is used to monitor DOM size changes.

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
}

In this way, you can quickly generate a chart by passing in the chart DOM element and chart data every time you call.

Okey, use electron + vite.js to develop the background management system at cross ends, and share it here for the time being.

Finally, attach the copy of electron + vue3 desktop with short video + live broadcast
https://segmentfault.com/a/1190000039725671

Electron12-vite2-vadmin: Based on vue3. X + electron desktop management system | Electron background template