tauri2.0-admin桌面端后臺系統|Tauri2+Vite5+ElementPlus管理后臺EXE程序

原創Tauri2.0+Vue3+ElementPlus客戶端通用后臺管理系統Tauri2Admin。

tauri2-vue3-admin基于最新跨平臺框架 Tauri2.0 整合 Vite5+Vue3全家桶搭建的一款輕量級桌面端后臺管理系統模板。封裝tauri2多窗口切換管理，提供4種通用布局模板，支持vue-i18n國際化、面包屑導航、多標簽快捷路由等功能。

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式ai聊天系統

Tauri2.8+Vue3聊天系統|vite7+tauri2+element-plus客戶端仿微信聊天程序

Tauri2.0-Vue3OS桌面端os平臺|tauri2+vite6+arco電腦版OS管理系統

使用技術

編碼器：vscode
技術框架：tauri2.0+vite^5.4.8+vue^3.5.11+vue-router^4.4.5
狀態管理：pinia^2.2.4
存儲服務：pinia-plugin-persistedstate^4.1.1
組件庫：element-plus^2.8.5
圖表組件：echarts^5.5.1
國際化：vue-i18n^10.0.4
富文本編輯器：@vueup/vue-quill^1.2.0
md編輯器：md-editor-v3^4.20.3
模擬數據：mockjs^1.1.0
預處理樣式：sass^1.79.4

功能性

基于最新跨平臺技術棧Tauri2.x、Vite5.x、Vue3 setup、Pinia2、ElementPlus、Vue-I18n、Echarts
支持國際化中英文/繁體三種語言
支持動態權限路由、面包屑導航、快捷標簽欄緩存路由
tauri2高復用多窗口管理
提供4種通用布局模板、自由變換風格
整合常用的表格、表單、列表、圖表、編輯器、錯誤處理等業務場景
清爽UI界面、輕量級可自由定制模板

項目框架目錄

tauri2-vue3admin采用最新跨平臺技術 Tauri2.0+Vite5 構建項目模板。

Tauri2.0-Vue3Admin已經更新到我的原創作品集，歡迎去下載使用。

原創tauri2.0+vue3+element-plus桌面端exe后臺管理系統

入口配置main.js

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入插件配置
import Plugins from './plugins'

// 引入路由/狀態管理
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')

tauri2.0-admin通用模板

提供了4種常見的布局模板，也可自由定制化功能模板。

<!-- 布局模板(經典) -->

<script setup>
  import { appState } from '@/pinia/modules/app'

  import Toolbar from '@/layouts/components/Toolbar.vue'
  import Sidebar from '@/layouts/components/sidebar/index.vue'
  import Menus from '@/layouts/components/menus/index.vue'
  import Breadcrumb from '@/layouts/components/Breadcrumb.vue'
  import Tabview from '@/layouts/components/Tabview.vue'
  import Main from '@/layouts/components/Main.vue'

  const appstate = appState()
</script>

<template>
  <div class="vuadmin__layout flexbox flex-col">
    <Toolbar />

    <div class="vuadmin__layout-body flex1 flexbox">
      <!-- 側邊欄 -->
      <div class="vuadmin__layout-sidebar">
        <Sidebar />
      </div>

      <!-- 菜單欄 -->
      <div class="vuadmin__layout-menus" :class="{'hidden': appstate.config.collapsed}">
        <el-scrollbar>
          <Menus :rootRouteEnable="false" />
        </el-scrollbar>
      </div>

      <!-- 右側主內容區 -->
      <div class="vuadmin__layout-main flex1 flexbox flex-col">
        <!-- 面包屑導航 -->
        <Breadcrumb v-if="appstate.config.breadcrumb" />

        <!-- 標簽頁 -->
        <Tabview v-if="appstate.config.tabview" />

        <!-- 內容區 -->
        <Main />
      </div>
    </div>
  </div>
</template>

tauri2.0+vue3自定義導航/拖拽窗口

<script setup>
  import { ref, markRaw } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { QuestionFilled, SwitchButton } from '@element-plus/icons-vue'
  import { getCurrentWindow } from '@tauri-apps/api/window'
  import { listen } from '@tauri-apps/api/event'
  import { exit } from '@tauri-apps/plugin-process'

  import { isTrue } from '@/utils'
  import { authState } from '@/pinia/modules/auth'

  const authstate = authState()

  const props = defineProps({
    color: String,
    // 窗口是否可最小化
    minimizable: {type: [Boolean, String], default: true},
    // 窗口是否可最大化
    maximizable: {type: [Boolean, String], default: true},
    // 窗口是否可關閉
    closable: {type: [Boolean, String], default: true},
    // 層級
    zIndex: {type: [Number, String], default: 2024},
  })

  const hasMaximized = ref(false)
  const isResizable = ref(true)
  const isMaximizable = ref(true)
  
  // 用戶是否可以手動調整窗口大小
  getCurrentWindow().isResizable().then(res => {
    isResizable.value = res
  })
  // 窗口是否可以最大化
  getCurrentWindow().isMaximizable().then(res => {
    isMaximizable.value = res
  })
  // 初始監聽窗口是否最大化
  getCurrentWindow().isMaximized().then(res => {
    hasMaximized.value = res
  })
  // 實時監聽窗口是否最大化
  listen('tauri://resize', async() => {
    hasMaximized.value = await getCurrentWindow().isMaximized()
  })

  // 最小化
  const handleWinMin = async() => {
    await getCurrentWindow().minimize()
  }
  // 最大化/還原
  const handleWinToggle = async() => {
    await getCurrentWindow().toggleMaximize()
  }
  // 關閉
  const handleWinClose = async() => {
    const isMajor = getCurrentWindow().label.indexOf('main') > -1
    if(isMajor) {
      ElMessageBox.confirm('是否最小化到系統托盤，不退出程序?', '提示', {
        type: 'warning',
        icon: markRaw(QuestionFilled),
        confirmButtonText: '殘忍退出',
        cancelButtonText: '最小化到托盤',
        customStyle: {'width': '300px'},
        draggable: true,
        roundButton: true,
        center: true,
        buttonSize: 'small',
        distinguishCancelAndClose: true,
      }).then(async() => {
        authstate.logout()
        await exit()
      }).catch(async(action) => {
        if(action === 'cancel') {
          await getCurrentWindow().hide()
        }
      })
    }else {
      await getCurrentWindow().close()
    }
  }
</script>

<template>
  <div class="ev__winbtns flexbox flex-alignc vu__drag" :style="{'z-index': zIndex}">
    <div class="ev__winbtns-actions flexbox flex-alignc vu__undrag" :style="{'color': color}">
      <a v-if="isTrue(minimizable)" class="wbtn min" title="最小化" @click="handleWinMin"><i class="wicon iconfont elec-icon-min"></i></a>
      <a v-if="isTrue(maximizable)" class="wbtn toggle" :title="hasMaximized ? '向下還原' : '最大化'" @click="handleWinToggle">
        <i class="wicon iconfont" :class="hasMaximized ? 'elec-icon-restore' : 'elec-icon-max'"></i>
      </a>
      <a v-if="isTrue(closable)" class="wbtn close" title="關閉" @click="handleWinClose"><i class="wicon iconfont elec-icon-quit"></i></a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>

tauri設置無邊框裝飾后，拖拽窗口直接在需要拖拽的元素標簽加上 data-tauri-drag-region 屬性即可。

tauri2+vue3國際化配置

tauri2-admin使用vue-i18n設置國際化多語言支持。

import { createI18n } from 'vue-i18n'
import { appState } from '@/pinia/modules/app'

// 引入語言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

// 默認語言
export const langVal = 'zh-CN'

export default async (app) => {
  const appstate = appState()
  const lang = appstate.lang || langVal
  appstate.setLang(lang)

  const i18n = createI18n({
    legacy: false,
    locale: lang,
    messages: {
      'en': enUS,
      'zh-CN': zhCN,
      'zh-TW': zhTW
    }
  })
  
  app.use(i18n)
}

tauri2-vue3admin動態圖表

vue3封裝可自適應動態圖表，采用 element-resize-detector 插件動態監聽DOM尺寸改變。

import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'

export function useEcharts(el, options) {
  let chartEl
  let chartRef = ref(null)
  let erd = elementResizeDetectorMaker()

  const resizeHandle = () => {
    chartEl && chartEl.resize()
  }

  onMounted(() => {
    if(el?.value) {
      chartEl = echarts.init(el.value)
      chartEl.setOption(options)
      chartRef.value = chartEl
    }
    erd.listenTo(el.value, resizeHandle)
  })

  onBeforeUnmount(() => {
    chartEl.dispose()
    erd.removeListener(el.value, resizeHandle)
  })

  return chartRef
}

直接通過如下方式調用即可。

import { useEcharts } from '@/hooks/useEcharts'

const visitChartRef = ref(null)
useEcharts(visitChartRef, {
  tooltip: {
    trigger: 'axis',
    appendToBody: true,
  },
  grid: {
    // ...
  },
  xAxis: {
    // ...
  },
  yAxis: {
    type: 'value'
  },
  series: [
    // ...
  ]
})

tauri2-vue3admin標簽欄路由/面包屑導航

<template>
  <div class="vu__tabview">
    <el-tabs
      v-model="activeTab"
      class="vu__tabview-tabs"
      @tab-change="changeTabs"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :name="item.path"
        :closable="!item?.meta?.isAffix"
      >
        <template #label>
          <el-dropdown ref="dropdownRef" trigger="contextmenu" :id="item.path" @visible-change="handleDropdownChange($event, item.path)" @command="handleDropdownCommand($event, item)">
            <span class="vu__tabview-tabs__label">
              <span>{{$t(item?.meta?.title)}}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="refresh" :icon="Refresh">{{$t('tabview__contextmenu-refresh')}}</el-dropdown-item>
                <el-dropdown-item command="close" :icon="Close" :disabled="item.meta.isAffix">{{$t('tabview__contextmenu-close')}}</el-dropdown-item>
                <el-dropdown-item command="closeOther" :icon="Switch">{{$t('tabview__contextmenu-closeother')}}</el-dropdown-item>
                <el-dropdown-item command="closeLeft" :icon="DArrowLeft">{{$t('tabview__contextmenu-closeleft')}}</el-dropdown-item>
                <el-dropdown-item command="closeRight" :icon="DArrowRight">{{$t('tabview__contextmenu-closeright')}}</el-dropdown-item>
                <el-dropdown-item command="closeAll" :icon="CircleCloseFilled">{{$t('tabview__contextmenu-closeall')}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  import { appState } from '@/pinia/modules/app'

  import { useRoutes } from '@/hooks/useRoutes'

  const props = defineProps({
    // 是否顯示展開/收縮
    collapseEnable: { type: Boolean, default: true },
  })

  const appstate = appState()
  const { getMatchRoute } = useRoutes()

  const matchRoute = computed(() => getMatchRoute())

  const handleCollapse = () => {
    appstate.config.collapsed = !appstate.config.collapsed
  }
</script>

<template>
  <div class="vu__breadcrumb flexbox">
    <i class="iconfont" :class="appstate.config.collapsed ? 'elec-icon-menuon' : 'elec-icon-menuoff'" @click="handleCollapse"></i>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in matchRoute" :key="index">
        <router-link v-if="item.path" :to="item.path">{{$t(item?.meta?.title)}}</router-link>
        <template v-else>{{$t(item?.meta?.title)}}</template>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

Ok，以上就是tauri2.0+vue3實戰手擼桌面版后臺管理系統的一些知識分享，希望對大家有所幫助！

web前端項目案例實戰

交流分享前端(移動端|微信端|小程序)最新技術、知識、項目案例...