Vue.js 2.0 的 TypeScript 教程-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一款流行的前端框架，它的易用性和灵活性深受开发者的喜爱。而 TypeScript 是一种面向对象的编程语言，它可以提供更好的代码提示和类型检查。本文将介绍如何使用 TypeScript 开发 Vue.js 2.0 应用程序。

安装

首先，我们需要安装 Vue.js 和 TypeScript。可以使用 npm 或者 yarn 安装它们：

npm install vue typescript --save

或者

yarn add vue typescript

配置

接下来，我们需要配置 TypeScript。在项目根目录下创建 tsconfig.json 文件，并添加以下内容：

// javascriptcn.com 代码示例
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

其中，compilerOptions 是 TypeScript 编译器的配置项。我们设置了目标编译版本为 ES5，模块化方式为 ES2015，开启了严格模式和装饰器支持。include 表示需要编译的文件路径，exclude 表示不需要编译的文件路径。

然后，我们需要配置 Webpack，以支持 TypeScript 文件的编译。在项目根目录下创建 webpack.config.js 文件，并添加以下内容：

// javascriptcn.com 代码示例
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            ts: 'ts-loader'
          }
        }
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devtool: '#source-map'
};

其中，entry 表示入口文件路径，output 表示输出文件路径。resolve 表示文件解析规则，我们添加了对 .ts 文件的支持。module 表示模块加载规则，我们使用了 vue-loader 和 ts-loader 来加载 Vue 组件和 TypeScript 文件。plugins 表示 Webpack 插件，我们使用了 vue-loader 插件。devtool 表示调试工具，我们使用了 SourceMap。

开发

现在，我们可以开始开发 Vue.js 应用程序了。在 src 目录下创建一个 App.vue 文件，并添加以下内容：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

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

@Component
export default class App extends Vue {
  message: string = 'Hello Vue.js and TypeScript!';

  increment(): void {
    this.message += '!';
  }
}
</script>

其中，<template> 表示模板，<script> 表示脚本。我们使用了 vue-property-decorator 库，它提供了一些装饰器，可以简化 Vue 组件的开发。@Component 表示这个类是一个 Vue 组件，export default 表示默认导出这个类。message 是一个字符串类型的数据，表示消息内容。increment 是一个方法，表示点击按钮后增加一个感叹号。

然后，在 src 目录下创建一个 main.ts 文件，并添加以下内容：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

其中，import 表示引入模块。new Vue 表示创建一个 Vue 实例，el 表示挂载元素的选择器，render 表示渲染组件的函数。

最后，在 index.html 文件中添加以下内容：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue.js and TypeScript</title>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>
</html>

其中，<div id="app"></div> 表示挂载元素，<script src="/dist/build.js"></script> 表示引入脚本文件。

运行

现在，我们可以运行应用程序了。在命令行中输入以下命令：

npm run dev

或者

yarn dev

然后，在浏览器中访问 http://localhost:8080，就可以看到应用程序的效果了。

总结

本文介绍了如何使用 TypeScript 开发 Vue.js 2.0 应用程序。我们首先安装了 Vue.js 和 TypeScript，然后配置了 TypeScript 和 Webpack。最后，我们开发了一个简单的 Vue.js 组件，并运行了应用程序。希望本文对您有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657d838cd2f5e1655d85cfdb