vue2.0 + typescript 搭建工程

原创

mob649e816880fe 2023-07-22 15:35:59 ©著作权

文章标签 Vue bash typescript 文章分类 TypeScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e816880fe的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue2.0 + TypeScript 搭建工程

简介

在这篇文章中，我将向你介绍如何使用 Vue2.0 和 TypeScript 搭建工程。我将详细解释每个步骤，并提供相应的示例代码。

整体流程

下面是搭建 Vue2.0 + TypeScript 工程的整体流程：

步骤	描述
1. 创建新的 Vue 项目	使用 Vue CLI 创建一个新的 Vue 项目
2. 配置 TypeScript	配置 TypeScript 支持，并安装相关依赖
3. 编写组件	创建 Vue 组件并使用 TypeScript 进行编写
4. 运行项目	执行命令运行项目，并查看效果

现在，让我们逐步介绍每个步骤。

步骤1：创建新的 Vue 项目

首先，我们需要使用 Vue CLI 创建一个新的 Vue 项目。在终端（命令行界面）中执行以下命令：

vue create my-project

在这个命令中，my-project 是你想要创建的项目名称。Vue CLI 将会自动创建一个基本的 Vue 项目结构。

步骤2：配置 TypeScript

在第二步中，我们需要配置 TypeScript 支持，并安装相关的依赖。进入项目目录，并执行以下命令：

cd my-project
vue add @vue/typescript

这个命令将会自动安装 TypeScript 相关的依赖，并为你的项目配置 TypeScript 支持。

步骤3：编写组件

在第三步中，我们将编写 Vue 组件，并使用 TypeScript 进行编写。在 src 目录下，你可以创建一个新的组件文件，比如 MyComponent.vue。在这个文件中，我们可以使用以下代码：

<template>
  <div>
    {{ message }}
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello, Vue!';
  count: number = 0;

  increment(): void {
    this.count++;
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
button {
  background-color: green;
  color: white;
}
</style>

在这段代码中，我们定义了一个名为 MyComponent 的 Vue 组件，并使用了 TypeScript 进行编写。在组件的 script 部分，我们使用了 vue-property-decorator 库来引入 @Component 装饰器，以及其他 TypeScript 相关的语法。