Files
vue-ts-example/src/pages/index.page.vue
严浩 4542944f52
Some checks failed
/ depcheck (push) Successful in 2m24s
/ lint-build-and-check (push) Successful in 2m36s
/ build-and-deploy-to-vercel (push) Successful in 3m13s
/ surge (push) Successful in 2m40s
/ playwright (push) Failing after 8m16s
整理
2025-03-10 13:15:38 +08:00

51 lines
1.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup lang="tsx">
const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
import { routes } from 'vue-router/auto-routes';
definePage({ meta: { title: '首页' } });
useHead({
// Classes
bodyAttrs: { class: { overflow: true } },
// Template params
templateParams: { separator: '|', siteName: 'My App' },
// Titles
title: 'Hello World',
titleTemplate: '%s %separator %siteName',
// Deduping
// script: [{ key: '123', src: '/script.js' }],
});
consola.info('routes', routes);
const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props /* context */) => (
<>
<a
class="green"
href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
rel="noopener noreferrer"
target="_blank"
>
函数式组件: https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
</a>
<p>函数式组件接收到的 prop 值为</p>
<pre>{JSON.stringify(props, null, 2)}</pre>
</>
);
</script>
<template>
<div b="1px solid pink" mt-2 p-2>
<ul>
<li>
<router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link>
</li>
</ul>
</div>
<div b="1px solid pink" mt-2 p-2>
<FComponent prop="Hello World" style="margin-top: 1rem"></FComponent>
</div>
<SendSms class="mt-2!" />
<div b="1px solid pink" mt-2 p-2>commit: {{ VITE_BUILD_COMMIT }}</div>
</template>