78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
<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({
|
||
// Titles
|
||
title: 'Hello World',
|
||
titleTemplate: '%s %separator %siteName',
|
||
// Template params
|
||
templateParams: { separator: '|', siteName: 'My App' },
|
||
// Classes
|
||
bodyAttrs: { class: { overflow: true } },
|
||
// Deduping
|
||
// script: [{ key: '123', src: '/script.js' }],
|
||
});
|
||
|
||
consola.info('routes', routes);
|
||
|
||
const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props, context) => (
|
||
<>
|
||
<a
|
||
class="green"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
|
||
>
|
||
函数式组件: 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>
|
||
|
||
<p class="mt-2" b="1px solid pink">
|
||
unocss-preset-chinese 中文<span class="chinese">排版</span
|
||
><br />https://unocss-preset-chinese-playground.vercel.app/
|
||
</p>
|
||
|
||
<div :class="$style.hero" mt-2>
|
||
<h1><i>🔌</i> Vite Plugin Webfont DL <i>⚡</i></h1>
|
||
<h2>Fonts are downloaded directly from Google Fonts</h2>
|
||
<pre>{{ JSON.stringify({ $style }, null, 2) }}</pre>
|
||
</div>
|
||
</template>
|
||
|
||
<style module>
|
||
/* https://cn.vuejs.org/api/sfc-css-features#css-modules */
|
||
h1 {
|
||
font-family: 'Press Start 2P', cursive;
|
||
color: #646cff;
|
||
}
|
||
|
||
h2 {
|
||
font-family: 'Fira Code', monospace;
|
||
background-color: #42b983;
|
||
}
|
||
|
||
.hero {
|
||
border: 1px solid #42b983;
|
||
}
|
||
</style>
|