Tauri 2.12 + Vite 8 + Vue 3 + ElementPlus 实战桌面 Admin 管理系统
4 / 0 / 创建于 4小时前
xiaoyan2015 的个人博客
Tauri 2.12真香！包体积15MB！最新版 Tauri 2.12 + Vite 8 + Vue 3 打造轻量级桌面 Admin 管理系统框架。
🔥 Tauri 2.12 全新升级，Vite 8 + Vue3 加持，Pinia4状态管理，Element-Plus组件库，搭建一套高性能开箱即用中后台管理系统框架。支持浅色+暗黑主题、内置4种布局模板，实现图表、表格、表单、列表、编辑器、错误页等常用功能模块。
运用技术
- 跨平台框架：Tauri^2.12.3
- 前端技术框架：vite^8.3.4+vue^3.5.43+vue-router^5.4.0
- 组件库：element-plus^2.14.7
- 状态管理：pinia^4.1.0
- 国际化方案：vue-i18n^11.4.15
- 图表插件：echarts^6.1.0
- markdown组件：md-editor-v3^7.1.0
- 富文本组件：@vueup/vue-quill^1.5.5
- 数据模拟：mockjs^1.1.0
项目结构目录
Tauri2.12-Vue3Admin客户端后台系统已经发布到原创作品小店👇
原创tauri2.12+vite8+vue3+element-plus客户端后台系统EXE
项目入口配置
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
// 引入状态/路由管理
import Pinia from './pinia'
import Router from './router'
// 引入插件配置
import Plugins from './plugins'
createApp(App)
.use(Pinia)
.use(Router)
.use(Plugins)
.mount('#app')App.vue模板
<script setup>
import { onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
import { appState } from '@/pinia/modules/app'
import { Loaded } from '@/plugins/loaded'
// 引入组件库国际化
import zhCN from 'element-plus/es/locale/lang/zh-cn'
import enUS from 'element-plus/es/locale/lang/en'
import zhTW from 'element-plus/es/locale/lang/zh-tw'
const locales = {
'zh-CN': zhCN,
'en-US': enUS,
'zh-TW': zhTW,
}
const router = useRouter()
const appstate = appState()
const locale = computed(() => locales[appstate.lang] ?? zhCN)
Loaded()
onMounted(async() => {
try {
const win = getCurrentWebviewWindow()
// 确保初始导航就绪
await router.isReady()
await win.show()
await win.unminimize()
await win.setFocus()
} catch (err) {
console.warn('[window] 初始化窗口失败:', err)
}
})
</script>
<template>
<el-config-provider :locale="locale">
<router-view />
</el-config-provider>
</template>如果对项目更详细介绍感兴趣，看看下面这篇文章。
最新版Tauri 2.12+Vite8+Vue3+Element Plus重构桌面端后台管理系统
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号