vue+typescript项目案例-CFANZ编程社区

Vue + TypeScript 项目案例

介绍

Vue 是一款流行的 JavaScript 框架，用于构建用户界面。而 TypeScript 是 JavaScript 的超集，为 JavaScript 添加了静态类型检查和一些新特性。Vue 和 TypeScript 的结合可以提供更好的开发体验和代码质量。

本文章将通过一个示例项目来介绍如何使用 Vue 和 TypeScript 来构建一个简单的待办事项应用。

安装和配置

首先，确保已经安装了 Node.js 和 Vue CLI。可以使用以下命令来检查是否安装成功：

node -v
vue --version

接下来，使用 Vue CLI 创建一个新的 Vue 项目：

vue create todo-app

在创建项目的过程中，选择 "Manually select features"，并选中 "TypeScript" 选项。

等待项目创建完成后，进入项目目录并启动开发服务器：

cd todo-app
npm run serve

现在，可以在浏览器中打开 http://localhost:8080，应该能看到一个基本的 Vue 应用。

创建组件

接下来，我们将创建一个 TodoList 组件来展示待办事项列表。在项目的 src 目录下创建一个新文件 TodoList.vue，并编写以下代码：

<template>
  <div>
    Todo List
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
    </ul>
  </div>
</template>

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

export default defineComponent({
  name: 'TodoList',
  data() {
    return {
      todos: [
        { id: 1, title: 'Buy groceries' },
        { id: 2, title: 'Clean the house' },
      ],
    };
  },
});
</script>

以上代码定义了一个名为 TodoList 的组件，使用了 Vue 的模板语法来展示待办事项列表。组件的数据使用了 TypeScript 的类型推断来指定。

使用组件

接下来，我们需要在应用的根组件中使用刚刚创建的 TodoList 组件。打开 src/App.vue 文件，并修改代码如下：

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import TodoList from './TodoList.vue';

export default defineComponent({
  name: 'App',
  components: {
    TodoList,
  },
});
</script>

以上代码将 TodoList 组件引入并在根组件中使用。

添加交互

现在，我们将为待办事项列表添加一些交互功能。在 TodoList.vue 文件中修改代码如下：

<template>
  <div>
    Todo List
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.title }}
        <button @click="remove(todo.id)">Remove</button>
      </li>
    </ul>
    <form @submit.prevent="add">
      <input type="text" v-model="newTodo" placeholder="Add a new todo" />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

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

export default defineComponent({
  name: 'TodoList',
  data() {
    return {
      todos: [
        { id: 1, title: 'Buy groceries' },
        { id: 2, title: 'Clean the house' },
      ],
      newTodo: '',
    };
  },
  methods: {
    add() {
      if (this.newTodo) {
        const newId = this.todos.length + 1;
        this.todos.push({ id: newId, title: this.newTodo });
        this.newTodo = '';
      }
    },
    remove(id: number) {
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
  },
});
</script>

以上代码在待办事项列表的每个项后面添加了一个删除按钮，并在底部添加了一个表单来添加新的待办事项。同时，还定义了 add 和 remove 两个方法来处理交互逻辑。