typescript vue

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

// App.vue
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const message = ref('Hello Vue with TypeScript!');

    return {
      message,
    };
  },
});
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. main.ts:

   • 使用 createApp 函数创建一个 Vue 应用实例，并挂载到 HTML 中的 #app 元素上。

2. App.vue:

   • 模板部分包含一个简单的 <h1> 标签，用于显示消息。
   • 脚本部分使用了 Vue 3 的 Composition API 和 TypeScript。通过 defineComponent 创建组件，并使用 ref 来定义响应式数据 message。
   • 样式部分是 scoped 的 CSS，仅应用于当前组件。

这个示例展示了如何在 Vue 3 中使用 TypeScript 来构建一个简单的应用。