vue ts如何创建

目录

1安装 Vue CLI（如果你尚未安装它）：

2.创建一个新的Vue项目，并选择TypeScript作为主要语言：

3.进入项目目录并启动开发服务器：

4.编写Vue组件和TypeScript代码：

---

在Vue中使用TypeScript（TS）创建项目相对于使用JavaScript（JS）创建项目有一些额外的配置步骤。以下是使用Vue CLI创建Vue项目，并使用TypeScript作为主要语言的基本步骤：

1安装 Vue CLI（如果你尚未安装它）：

确保你已经全局安装了Vue CLI。如果没有，请在命令行中运行以下命令进行安装：

npm install -g @vue/cli

2.创建一个新的Vue项目，并选择TypeScript作为主要语言：

在命令行中，运行以下命令来创建一个新的Vue项目：

vue create my-vue-ts-app

上述命令中，my-vue-ts-app 是你的项目名称，你可以根据需要更改它。

在安装的过程中，Vue CLI会提示你选择一个预设。你可以选择手动配置，或者选择一个包含TypeScript的预设。选择包含TypeScript的预设，这样Vue CLI就会为你自动配置好TypeScript相关的设置。

3.进入项目目录并启动开发服务器：

安装完成后，进入项目目录：

cd my-vue-ts-app

然后启动开发服务器：

npm run serve

4.编写Vue组件和TypeScript代码：

现在，你已经成功创建了一个使用TypeScript的Vue项目。在src目录中，你可以开始编写Vue组件和TypeScript代码。在.vue文件中，你可以使用<script lang="ts">标签来编写TypeScript代码。

例如，创建一个简单的Vue组件：

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      greeting: 'Hello, TypeScript in Vue!',
    };
  },
});
</script>

以上是基本的步骤，让你可以在Vue中使用TypeScript。你还可以根据需要添加其他TypeScript相关的配置，如自定义类型声明、配置TypeScript编译选项等。