Yunfei He
020fd0d85a
- basic-jsx: Counter + Clock with defineComponent() + JSX - basic-template: Counter + Clock with .vue SFC + <template> - Both demonstrate HMR via vue-tui dev - Fix vite-plugin: strip build.lib and external config for bundledDev, add node builtins resolveId to prevent browser-external shimming - Remove old hmr-demo example (superseded by basic-template) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
27 lines
589 B
TypeScript
27 lines
589 B
TypeScript
import { shallowRef, onMounted, onUnmounted, defineComponent } from "vue";
|
|
import { Box, Text } from "@vue-tui/runtime";
|
|
|
|
export default defineComponent(() => {
|
|
const time = shallowRef(new Date().toLocaleTimeString());
|
|
let timer: ReturnType<typeof setInterval>;
|
|
|
|
onMounted(() => {
|
|
timer = setInterval(() => {
|
|
time.value = new Date().toLocaleTimeString();
|
|
}, 1000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(timer);
|
|
});
|
|
|
|
return () => (
|
|
<Box>
|
|
<Text>Clock: </Text>
|
|
<Text bold color="yellow">
|
|
{time.value}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
});
|