vue3 ts开发

// Vue 3 + TypeScript 示例代码

// 1. 安装 Vue CLI (如果还没有安装)
// npm install -g @vue/cli

// 2. 创建一个新的 Vue 项目
// vue create my-project
// 在创建过程中选择 TypeScript 支持

// 3. 编写一个简单的 Vue 组件

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">点击我</button>
    <p>计数: {{ count }}</p>
  </div>
</template>

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

export default defineComponent({
  name: 'App',
  setup() {
    // 使用 ref 创建响应式数据
    const message = ref('Hello Vue 3 with TypeScript!');
    const count = ref(0);

    // 定义方法
    const increment = () => {
      count.value++;
    };

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

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

解释说明：

1. 模板部分 (<template>):

   • 包含了一个简单的 HTML 结构，展示了 message 和 count 的值，并绑定了一个按钮点击事件来调用 increment 方法。

2. 脚本部分 (<script lang="ts">):

   • 使用了 Vue 3 的 Composition API 和 TypeScript。
   • defineComponent 是 Vue 3 提供的一个函数，用于定义组件，确保类型推断更准确。
   • ref 是 Vue 3 中用于创建响应式数据的函数，返回一个包含 .value 属性的对象。
   • setup 函数是 Composition API 的入口，返回的对象中的属性和方法可以直接在模板中使用。

3. 样式部分 (<style scoped>):

   • 使用了 scoped 样式，确保样式只应用于当前组件。