更新

src/App.vue

@@ -4,5 +4,6 @@ const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
 
 <template>
   <div fixed rounded-br-4 bottom-0 left-0 z-9999 px-4 py-2 bg-black text-white>commit: {{ VITE_BUILD_COMMIT }}</div>
+  <div>$__DEV__: {{ $__DEV__ }}</div>
   <RouterView />
 </template>

src/components/ReusableTemplate.vue

@@ -0,0 +1,14 @@
+<template>
+  <TemplateFoo.define v-slot="{ msg }">
+    <div>Hello {{ msg.toUpperCase() }}</div>
+  </TemplateFoo.define>
+
+  <TemplateFoo.reuse msg="World" />
+  <TemplateFoo.reuse msg="Reusable" />
+</template>
+
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core';
+
+const TemplateFoo = createReusableTemplate<{ msg: string }>();
+</script>

src/main.ts

@@ -23,14 +23,15 @@ async function init() {
     });
   }
 
-  createApp(App)
+  const app = createApp(App)
     .use(createHead())
     .use(createPinia())
     // Register the plugin before the router
     .use(DataLoaderPlugin, { router })
     // adding the router will trigger the initial navigation
-    .use(router)
-    .mount('#app');
+    .use(router);
+  app.config.globalProperties.$__DEV__ = $__DEV__;
+  app.mount('#app');
 }
 
 init();

src/pages/index-page.vue

@@ -1,6 +1,4 @@
 <script lang="tsx" setup>
-import type { FunctionalComponent } from 'vue';
-
 useHead({
   // Titles
   title: 'Hello World',
@@ -16,11 +14,14 @@ definePage({
   alias: '/',
 });
 
+import type { FunctionalComponent } from 'vue';
+
 // https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
 const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
   <>
-    <div>This is a functional component with prop: {props.prop}</div>
-    <div>{props.prop}</div>
+    <div b="1 solid pink" text="pink">
+      <span>This is a functional component with prop: {JSON.stringify(props)}</span>
+    </div>
   </>
 );
 </script>
@@ -35,4 +36,9 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
     <li><router-link :to="{ name: 'MdPage' }">Markdown Page</router-link></li>
   </ul>
   <FComponent prop="Hello World" />
+  <div text-orange></div>
+
+  <div b="1px solid pink" mt-8>
+    <ReusableTemplate />
+  </div>
 </template>

src/types/shims.d.ts

@@ -1,12 +0,0 @@
-export {};
-
-declare global {
-  const $__DEV__: boolean;
-}
-
-/* declare module 'vue' {
-	export interface ComponentCustomProperties {
-		$__DEV__: boolean;
-	}
-}
- */

src/types/shims/global.ts

@@ -0,0 +1,11 @@
+declare global {
+  const $__DEV__: boolean;
+}
+
+declare module 'vue' {
+  export interface ComponentCustomProperties {
+    $__DEV__: boolean;
+  }
+}
+
+export {};

src/types/shims/router.ts

@@ -1,8 +1,5 @@
 import 'vue-router';
 
-// 为了确保这个文件被当作一个模块，添加至少一个 `export` 声明
-export {};
-
 // declare module 'vue-router' {
 //   interface RouteMeta {
 //     // fromList?: RouteLocationNormalized[]
@@ -19,3 +16,5 @@ export {};
 //     // stackIndex: number
 //   }
 // }
+
+export {};

src/types/shims/unocss.ts

@@ -0,0 +1,15 @@
+// https://unocss.dev/presets/attributify#vue-3
+import type { BasicAttributes, PseudoPrefix } from '@unocss/preset-attributify';
+
+// https://github.com/unocss/unocss/pull/4095
+type BasicAttributesFix = BasicAttributes | 'b';
+
+type AttributifyNames<Prefix extends string = ''> =
+  | `${Prefix}${BasicAttributesFix}`
+  | `${Prefix}${PseudoPrefix}:${BasicAttributes}`;
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes extends Partial<Record<AttributifyNames, string | boolean>> {}
+}
+
+export {};