Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

最新研发tauri2.9+vite7.1+pinia3桌面版高颜值中后台系统TauriVue3Admin。

vite7-tauri2-admin最新跨平台技术tauri2.9+vite7.1.12+vue3 setup+pinia3+element-plus+echarts搭建电脑端轻量级管理后台系统模板。提供4种通用布局模板，支持i18n多语言、包含了表格、图表、表单、列表、编辑器、错误处理等业务模块。

技术栈

开发工具：VScode
跨平台框架：Tauri^2.9
前端技术框架：vite^7.1.12+vue^3.5.22+vue-router^4.6.3
组件库：element-plus^2.11.5
状态管理：pinia^3.0.3
国际化方案：vue-i18n^11.1.12
图表组件：echarts^6.0.0
markdown编辑器：md-editor-v3^6.1.0
富文本编辑器：@vueup/vue-quill^1.2.0
模拟数据：mockjs^1.1.0

功能特性

基于最新跨平台技术栈Tauri2.9、Vite7、Vue3 setup、Pinia3、ElementPlus、Echarts、Vue-I18n
支持中英文/繁体三种语言
支持动态路由、面包屑导航、快捷路由标签栏
内置4种通用布局模板、随意切换风格
包含常用的图表、表格、表单、列表、编辑器、错误处理等业务场景
tauri2封装多开窗口管理

项目结构目录

tauri2-vue3-admin基于最新跨平台技术 Tauri2.9+Vite7.1 搭建项目框架模板。

Tauri2.9-ViteAdmin客户端后台系统已经同步到我的原创作品集，欢迎下载使用。

tauri2.9+vue3+element-plus客户端后台系统EXE

项目入口文件

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

通用布局模板

如上图：项目提供了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+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>
  @use './index.scss';
</style>

vue-i18n多语言配置

tauri2-admin支持中英文/繁体三种语言切换，支持自定义配置语言。

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自定义动态图表hooks

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
}

综上就是tauri2+vite7+vue3搭建客户端中后台管理系统的一些知识分享，希望对大家有所帮助！

附上几个最新研发实战项目案例

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

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

vite7-webos网页版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后台系统

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

posted @ 2025-11-01 00:34 xiaoyan2017 阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

web前端项目案例实战

交流分享前端(移动端|微信端|小程序)最新技术、知识、项目案例...