@wangyao-test/vue-element-template 1.0.0

package/template/public/CNAME

@@ -0,0 +1 @@
+vite-starter.element-plus.org

package/template/public/element-plus-logo-small.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>

package/template/public/favicon.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/src/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-config-provider namespace="ep">
+    <BaseHeader />
+    <div class="main-container flex">
+      <BaseSide />
+      <div w="full" py="4">
+        <RouterView />
+      </div>
+    </div>
+  </el-config-provider>
+</template>
+
+<style>
+#app {
+  text-align: center;
+  color: var(--ep-text-color-primary);
+}
+
+.main-container {
+  height: calc(100vh - var(--ep-menu-item-height) - 4px);
+}
+</style>

package/template/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template/src/components/HelloWorld.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+const input = ref('element-plus')
+
+const curDate = ref('')
+
+function toast() {
+  ElMessage.success('Hello')
+}
+
+const value1 = ref(true)
+</script>
+
+<template>
+  <h1 color="$ep-color-primary">
+    {{ msg }}
+  </h1>
+
+  <p>
+    See
+    <a href="https://element-plus.org" target="_blank">element-plus</a> for more
+    information.
+  </p>
+
+  <!-- example components -->
+  <div class="mb-4">
+    <el-button size="large" @click="toast">
+      El Message
+    </el-button>
+
+    <MessageBoxDemo />
+  </div>
+
+  <div class="my-2 flex flex-wrap items-center justify-center text-center">
+    <el-button @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="primary" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="success" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="warning" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="danger" @click="count++">
+      count is: {{ count }}
+    </el-button>
+    <el-button type="info" @click="count++">
+      count is: {{ count }}
+    </el-button>
+  </div>
+
+  <div>
+    <el-tag type="success" class="m-1">
+      Tag 1
+    </el-tag>
+    <el-tag type="warning" class="m-1">
+      Tag 1
+    </el-tag>
+    <el-tag type="danger" class="m-1">
+      Tag 1
+    </el-tag>
+    <el-tag type="info" class="m-1">
+      Tag 1
+    </el-tag>
+  </div>
+
+  <div>
+    <el-switch v-model="value1" />
+    <el-switch
+      v-model="value1"
+      class="m-2"
+      style="--ep-switch-on-color: black; --ep-switch-off-color: gray;"
+    />
+  </div>
+
+  <div class="my-2">
+    <el-input v-model="input" class="m-2" style="width: 200px" />
+    <el-date-picker
+      v-model="curDate"
+      class="m-2"
+      type="date"
+      placeholder="Pick a day"
+    />
+  </div>
+
+  <p>For example, we can custom primary color to 'green'.</p>
+
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test components.
+  </p>
+  <p>
+    Edit
+    <code>styles/element/var.scss</code> to test scss variables.
+  </p>
+
+  <p>
+    Full Example:
+    <a
+      href="https://github.com/element-plus/element-plus-vite-starter"
+      target="_blank"
+    >element-plus-vite-starter</a>
+    | On demand Example:
+    <a
+      href="https://github.com/element-plus/unplugin-element-plus"
+      target="_blank"
+    >unplugin-element-plus/examples/vite</a>
+  </p>
+</template>
+
+<style>
+.ep-button {
+  margin: 4px;
+}
+.ep-button + .ep-button {
+  margin-left: 0;
+  margin: 4px;
+}
+</style>

package/template/src/components/Logos.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo">
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="../assets/vue.svg" class="logo vue" alt="Vue logo">
+    </a>
+    <a href="https://element-plus.org/" target="_blank">
+      <img src="/element-plus-logo-small.svg" class="logo element-plus" alt="Element Plus logo">
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+.logo.element-plus:hover {
+  filter: drop-shadow(0 0 2em #409effaa);
+}
+</style>

package/template/src/components/MessageBoxDemo.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { Action } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+function open() {
+  ElMessageBox.alert('This is a message', 'Title', {
+    // if you want to disable its autofocus
+    // autofocus: false,
+    confirmButtonText: 'OK',
+    callback: (action: Action) => {
+      ElMessage({
+        type: 'info',
+        message: `action: ${action}`,
+      })
+    },
+  })
+}
+</script>
+
+<template>
+  <el-button plain @click="open">
+    Click to open the Message Box
+  </el-button>
+</template>

package/template/src/components/layouts/BaseHeader.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { repository } from '~/../package.json'
+
+import { toggleDark } from '~/composables'
+</script>
+
+<template>
+  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
+    <el-menu-item index="/">
+      <div class="flex items-center justify-center gap-2">
+        <div class="text-xl" i-ep-element-plus />
+        <span>Element Plus</span>
+      </div>
+    </el-menu-item>
+    <el-sub-menu index="2">
+      <template #title>
+        Workspace
+      </template>
+      <el-menu-item index="2-1">
+        item one
+      </el-menu-item>
+      <el-menu-item index="2-2">
+        item two
+      </el-menu-item>
+      <el-menu-item index="2-3">
+        item three
+      </el-menu-item>
+      <el-sub-menu index="2-4">
+        <template #title>
+          item four
+        </template>
+        <el-menu-item index="2-4-1">
+          item one
+        </el-menu-item>
+        <el-menu-item index="2-4-2">
+          item two
+        </el-menu-item>
+        <el-menu-item index="2-4-3">
+          item three
+        </el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="3" disabled>
+      Info
+    </el-menu-item>
+    <el-menu-item index="4">
+      Orders
+    </el-menu-item>
+
+    <el-menu-item h="full" @click="toggleDark()">
+      <button
+        class="w-full cursor-pointer border-none bg-transparent"
+        style="height: var(--ep-menu-item-height)"
+      >
+        <i inline-flex i="dark:ep-moon ep-sunny" />
+      </button>
+    </el-menu-item>
+
+    <el-menu-item h="full">
+      <a class="size-full flex items-center justify-center" :href="repository.url" target="_blank">
+        <div i-ri-github-fill />
+      </a>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<style lang="scss">
+.el-menu-demo {
+  &.ep-menu--horizontal > .ep-menu-item:nth-child(1) {
+    margin-right: auto;
+  }
+}
+</style>

package/template/src/components/layouts/BaseSide.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+
+// const isCollapse = ref(true)
+function handleOpen(key: string, keyPath: string[]) {
+  // eslint-disable-next-line no-console
+  console.log(key, keyPath)
+}
+function handleClose(key: string, keyPath: string[]) {
+  // eslint-disable-next-line no-console
+  console.log(key, keyPath)
+}
+</script>
+
+<template>
+  <el-menu
+    router
+    default-active="1"
+    class="el-menu-vertical-demo"
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <el-sub-menu index="1">
+      <template #title>
+        <el-icon>
+          <Location />
+        </el-icon>
+        <span>Navigator One</span>
+      </template>
+      <el-menu-item-group>
+        <template #title>
+          <span>Group One</span>
+        </template>
+        <el-menu-item index="/nav/1/item-1">
+          item one
+        </el-menu-item>
+        <el-menu-item index="1-2">
+          item two
+        </el-menu-item>
+      </el-menu-item-group>
+      <el-menu-item-group title="Group Two">
+        <el-menu-item index="1-3">
+          item three
+        </el-menu-item>
+      </el-menu-item-group>
+      <el-sub-menu index="1-4">
+        <template #title>
+          <span>item four</span>
+        </template>
+        <el-menu-item index="1-4-1">
+          item one
+        </el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="/nav/2">
+      <el-icon>
+        <IconMenu />
+      </el-icon>
+      <template #title>
+        Navigator Two
+      </template>
+    </el-menu-item>
+    <el-menu-item index="3" disabled>
+      <el-icon>
+        <Document />
+      </el-icon>
+      <template #title>
+        Navigator Three
+      </template>
+    </el-menu-item>
+    <el-menu-item index="/nav/4">
+      <el-icon>
+        <Setting />
+      </el-icon>
+      <template #title>
+        Navigator Four
+      </template>
+    </el-menu-item>
+  </el-menu>
+</template>

package/template/src/components.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
+    BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    Logos: typeof import('./components/Logos.vue')['default']
+    MessageBoxDemo: typeof import('./components/MessageBoxDemo.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

package/template/src/composables/dark.ts

@@ -0,0 +1,4 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

package/template/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './dark'

package/template/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<object, object, any>
+  export default component
+}

package/template/src/main.ts

@@ -0,0 +1,46 @@
+import type { UserModule } from './types'
+import { ViteSSG } from 'vite-ssg'
+
+// import "~/styles/element/index.scss";
+
+// import ElementPlus from "element-plus";
+// import all element css, uncommented next line
+// import "element-plus/dist/index.css";
+
+// or use cdn, uncomment cdn link in `index.html`
+
+import { routes } from 'vue-router/auto-routes'
+import App from './App.vue'
+
+import '~/styles/index.scss'
+
+import 'uno.css'
+// If you want to use ElMessage, import it.
+import 'element-plus/theme-chalk/src/message.scss'
+import 'element-plus/theme-chalk/src/message-box.scss'
+
+// if you do not need ssg:
+// import { createApp } from "vue";
+
+// const app = createApp(App);
+// app.use(createRouter({
+//   history: createWebHistory(),
+//   routes,
+// }))
+// // app.use(ElementPlus);
+// app.mount("#app");
+
+// https://github.com/antfu/vite-ssg
+export const createApp = ViteSSG(
+  App,
+  {
+    routes,
+    base: import.meta.env.BASE_URL,
+  },
+  (ctx) => {
+    // install all modules under `modules/`
+    Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
+      .forEach(i => i.install?.(ctx))
+    // ctx.app.use(Previewer)
+  },
+)

package/template/src/pages/index.vue

@@ -0,0 +1,4 @@
+<template>
+  <Logos my="4" />
+  <HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
+</template>

package/template/src/pages/nav/1/item-1.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Item One
+  </div>
+</template>

package/template/src/pages/nav/2.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Navigation 2
+  </div>
+</template>

package/template/src/pages/nav/4.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Navigation 4
+  </div>
+</template>

package/template/src/styles/element/dark.scss

@@ -0,0 +1,11 @@
+// only scss variables
+
+$--colors: (
+  'primary': (
+    'base': #589ef8,
+  ),
+);
+
+@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+  $colors: $--colors
+);

package/template/src/styles/element/index.scss

@@ -0,0 +1,42 @@
+$--colors: (
+  'primary': (
+    'base': green,
+  ),
+  'success': (
+    'base': #21ba45,
+  ),
+  'warning': (
+    'base': #f2711c,
+  ),
+  'danger': (
+    'base': #db2828,
+  ),
+  'error': (
+    'base': #db2828,
+  ),
+  'info': (
+    'base': #42b8dd,
+  ),
+);
+
+// we can add this to custom namespace, default is 'el'
+@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
+  $namespace: 'ep'
+);
+
+// You should use them in scss, because we calculate it by sass.
+// comment next lines to use default color
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  // do not use same name, it will override.
+  $colors: $--colors,
+  $button-padding-horizontal: ('default': 50px)
+);
+
+// if you want to import all
+// @use "element-plus/theme-chalk/src/index.scss" as *;
+
+// You can comment it to hide debug info.
+// @debug $--colors;
+
+// custom dark variables
+@use './dark.scss';

package/template/src/styles/index.scss

@@ -0,0 +1,40 @@
+// import dark theme
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
+
+// :root {
+//   --ep-color-primary: red;
+// }
+
+body {
+  font-family: Inter, system-ui, Avenir, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+}
+
+a {
+  color: var(--ep-color-primary);
+}
+
+code {
+  border-radius: 2px;
+  padding: 2px 4px;
+  background-color: var(--ep-color-primary-light-9);
+  color: var(--ep-color-primary);
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(13, 148, 136);
+  opacity: 0.75;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}

package/template/src/typed-router.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/nav/1/item-1': RouteRecordInfo<'/nav/1/item-1', '/nav/1/item-1', Record<never, never>, Record<never, never>>,
+    '/nav/2': RouteRecordInfo<'/nav/2', '/nav/2', Record<never, never>, Record<never, never>>,
+    '/nav/4': RouteRecordInfo<'/nav/4', '/nav/4', Record<never, never>, Record<never, never>>,
+  }
+}

package/template/src/types.ts

@@ -0,0 +1,3 @@
+import type { ViteSSGContext } from 'vite-ssg'
+
+export type UserModule = (ctx: ViteSSGContext) => void

package/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"],
+    "useDefineForClassFields": true,
+    "baseUrl": ".",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "~/*": ["src/*"]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client",
+      "unplugin-vue-router/client"
+    ],
+    "strict": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "vueCompilerOptions": {
+    "target": 3
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}