仅15MB！Tauri 2.12 + Vite 8 + ElementPlus客户端Admin后台实战

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

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

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

  import Toolbar from '@/layouts/components/toolbar/index.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 />

        <!-- 标签页 -->
        <Tabview />

        <!-- 内容区 -->
        <Main />
      </div>
    </div>
  </div>
</template>

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