使用 TypeScript 构建 VueJS 应用程序创建 TypeScript 项目

2025-06-05

使用 TypeScript 构建 VueJS 应用程序

创建 TypeScript 项目

近年来，TypeScript 的受欢迎程度无疑不断增长。越来越多的 Web 开发人员希望使用静态类型语言，而随着 2016 年 Angular 2 的发布，TypeScript 开发人员的需求更是水涨船高。

当我开始用 TypeScript 编写 Angular 应用时，我觉得它很棒。我喜欢静态类型检查系统，也喜欢能够将模板存储在 TypeScript 文件之外，这样就能将逻辑层和表示层分离。可惜的是，我不喜欢 Angular 需要那么多设置，更不用说构建一个组件需要做三四件事了。对我来说，这太浪费时间了。

在此之前，我曾使用 VueJS 构建单页应用，并且非常喜欢它。我一直希望能够将 TypeScript 引入 VueJS，所以开始了研究！

现在我发现很多教程都解释了如何将 TypeScript 与 VueJS 结合使用，但其中很多都侧重于单文件组件。在我看来，这只适用于 JavaScript，但我非常喜欢 Angular 将模板存储在 HTML 文件中的方式。

@Component({
    selector: 'my-dashboard',
    templateUrl: 'dashboard.component.html',
})
export class DashboardComponent {}
Enter fullscreen mode Exit fullscreen mode

正当我以为自己运气不佳时，我找到了解决所有问题的方法。了不起的 VueJS 团队最近发布了 Vue CLI 3，它让使用 VueJS 编写 TypeScript 应用程序变得轻松许多！让我们来看看如何使用 TypeScript 搭建一个 VueJS 应用程序。

安装 Vue CLI

第一步是安装 Vue CLI，为此，只需运行以下命令之一（取决于您使用的工具）。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Enter fullscreen mode Exit fullscreen mode

完成后，您可以通过运行来验证它是否已正确安装vue --version。它应该显示类似的内容3.0.1。

创建 TypeScript 项目

新的 Vue CLI 工具允许您使用 TypeScript 轻松创建新项目。要开始使用，只需运行vue create my-app。然后系统会要求您选择一个预设。使用箭头键选择Manually select features。

接下来，你只需确保已选择TypeScript和Babel选项。你可以在下面看到，我还选择了一些其他可选功能。

选择您的选项

完成此操作后，它会询问您是否要使用class-style component syntax。您需要选择此选项。

然后配置其余设置，使其看起来像下图。

配置选项

Vue CLI 工具现在将安装所有依赖项并设置项目。

添加额外的依赖项

为了达到我们想要的效果，我们需要安装一些额外的依赖项。您可以通过运行以下命令之一来安装这些依赖项。

npm install --save vue-template-loader webpack-stream
# OR
yarn add vue-template-loader webpack-stream
Enter fullscreen mode Exit fullscreen mode

您现在应该可以运行yarn serve来查看当前的应用程序。

使用 TypeScript 类代替单文件组件

接下来，我们想要移除对文件的依赖.vue，改用 TypeScript 类。在components目录中，你可以看到HelloWorld.vue。我们将用 TypeScript 类重新创建它。

首先，在components目录中创建一个新文件并将其命名为HelloWorld.ts。我们将添加以下样板来开始。

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

}
Enter fullscreen mode Exit fullscreen mode

这给了我们一个可以使用的空白组件。我们首先需要做的是.html为组件的表示层创建一个外部文件。为此，请创建一个名为 的新文件hello-world.html。您可以将此文件放置在任何位置，但出于演示目的，我将它放在与组件相同的文件夹中。

现在我们需要将组件中的演示文稿复制HelloWorld.vue到新hello-world.html文件中。所以我们的文件现在应该是这样的。

<div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
Enter fullscreen mode Exit fullscreen mode

那么，如何在HelloWorld.ts类中使用这个模板文件呢？我们安装的额外依赖项使我们能够使用另一个装饰器WithRender。这允许我们导入 HTML 文件，并告诉 Vue 组件使用该文件进行渲染。将其添加到 TypeScript 文件后，它应该如下所示。

import { Component, Vue } from 'vue-property-decorator';
import WithRender from './hello-world.html';

@WithRender
@Component
export default class HelloWorld extends Vue {

}
Enter fullscreen mode Exit fullscreen mode

现在我们需要将 Vue Router 连接到新的 TypeScript 类，而不是HelloWorld.vue文件。为此，请打开views/Home.vue文件。实际上，您还需要为该组件创建一个 TypeScript 类，但在本指南中，我们只需编辑它即可。

在文件中，将 import 语句改为使用我们的 TypeScript 文件。因此，我们将以下行从

import HelloWorld from '@/components/HelloWorld.vue'
Enter fullscreen mode Exit fullscreen mode

到

import HelloWorld from '@/components/HelloWorld.ts';
Enter fullscreen mode Exit fullscreen mode

但是，如果你现在打开浏览器，就会看到一个错误。在我们的终端中，我们得到了以下错误：

Cannot find module './hello-world.html'
Enter fullscreen mode Exit fullscreen mode

这是因为 TypeScript 不知道如何处理.html文件。所以我们需要添加一个shim文件。为此，请在src文件夹中创建一个shims-html.d.ts文件。粘贴以下代码，您的文件应如下所示：

declare module '*.html' {
    import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
    interface WithRender {
        <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
        <V extends typeof Vue>(component: V): V
    }
    const withRender: WithRender
    export default withRender
}
Enter fullscreen mode Exit fullscreen mode

现在我们需要更新tsconfig.json文件，以便 TypeScript 知道要加载.html文件。将以下行添加到include数组中："src/**/*.html"。它看起来应该像这样：

  ...
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "src/**/*.html"
  ],
  ...
Enter fullscreen mode Exit fullscreen mode

最后，我们需要在构建过程中添加一些自定义的 webpack 配置，以告诉 Vue 将 html 文件传递​​给它的模板编译器。为此，在项目根目录中创建一个vue.config.js文件并添加以下内容：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /.html$/,
          loader: "vue-template-loader",
          exclude: /index.html/
        }
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们需要重新启动编译过程，以便 TypeScript 加载我们的更改。关闭当前终端进程，然后再次运行以下命令之一。

npm run serve
# OR
yarn serve
Enter fullscreen mode Exit fullscreen mode

您现在应该看到应用程序像以前一样加载，这次它使用 TypeScript 类文件和 html 模板文件。

最后你可能注意到了，msgdata 属性已经不存在了。现在我们来添加它。

在您的文件中HelloWorld.ts，添加以下属性

public msg: string = 'I am using TypeScript classes with Vue!';
Enter fullscreen mode Exit fullscreen mode

如果您现在回头看一下浏览器，您应该会看到该内容在页面上呈现。

就是这样，你现在可以使用 Vue 构建应用程序，但使用的是 TypeScript 类和html文件模板。虽然有些人可能不同意这种方法，并认为你应该只使用.vue文件，但我发现这种
方法更简洁，尤其是在某些文件很长的情况下。

这是系列文章的第一篇。下一篇我将深入讲解如何使用 TypeScript 编写 VueJS 应用程序，并讲解方法、数据属性、props、子组件等等！

更新

第二部分现已发布 - https://dev.to/georgehanson/building-vue-js-applications-with-typescript-part-two-2808

文章来源：https://dev.to/georgehanson/building-vuejs-applications-with-typescript-1j2n
Devto 翻译
PREV
我最喜欢的 3 个 JavaScript 数组方法
NEXT
CodePen - 生成 macOS Big Sur Waves 🌊 [SVG]