基于Tauri2.9+Vite7.1+Vue3+Pinia3+ElementPlus客户端admin后台系统模板

2025-11-01 361

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最新研发tauri2.9+vite7.1+vue3 setup+pinia3+element-plus桌面版高颜值轻量级中后台管理系统TauriVue3Admin。

2025最新原创研发vite7.1+tauri2.9+vue3.5+pinia3+echarts+elementPlus桌面电脑端通用后台admin管理系统。

003360截图20251030235230182.png 360截图20251030232724881.png

tauri2-vite7-admin包含4种布局模板，支持vue-i18n多语言、标签页路由，集合了图表、表格、表单、列表、编辑器等模块。

项目技术点

编辑器：VScode
跨平台技术：Tauri^2.9
前端技术框架：vite^7.1.12+vue^3.5.22+vue-router^4.6.3
UI组件库：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

360截图20251030220502382.png

360截图20251030222409100.png 360截图20251030223601903.png 360截图20251030224119951.png 360截图20251030231544724.png 360截图20251030232349841.png 360截图20251030233020624.png

项目结构目录

vite7-tauri2-admin使用最新跨平台技术Tauri2.9整合Vite7构建工具搭建项目模板。

360截图20251030220502375.png

tauri2-admin通用模板

bf6aad2c3132aecb4e1c0ad17da54bdb_1289798-20251031235118190-1222727200.png

内置4种通用布局模板。

744757b09f756b7daf6f6f0f3f989295_1289798-20251031235245159-1565356879.png

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

001360截图20251030233823998.png 002360截图20251030234551246.png 002360截图20251030234721061.png 002360截图20251030235111326.png 010360截图20251031001210670.png 010360截图20251031001303073.png 010360截图20251031001327385.png 010360截图20251031001352942.png 011360截图20251031001548691.png 012360截图20251031002130776.png 014360截图20251031002239959.png 016360截图20251031002516399.png 017360截图20251031002838142.png 018360截图20251031003049021.png 020360截图20251031003226534.png 022360截图20251031003346415.png 024360截图20251031003543702.png 024360截图20251031003628327.png 025360截图20251031003732638.png 028360截图20251031065303757.png