基于vue-cli3+typescript的tsx开发模板搭建过程分享

下面详细讲解在vue-cli3和typescript环境下如何搭建tsx模板的开发环境。

创建一个新项目

首先，我们需要安装vue-cli3脚手架工具，可以使用npm或yarn安装。

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

安装完成后，我们使用vue-cli3创建一个新的项目，选择手动配置选项。

vue create my-project

选择手动配置后，按照提示选择需要的功能，包括：

• Babel
• TypeScript
• Router
• Vuex
• CSS Pre-processors
• Linter / Formatter

选择完成后，我们需要安装@vue/cli-plugin-typescript包。

npm install @vue/cli-plugin-typescript --save-dev
# 或者
yarn add @vue/cli-plugin-typescript --dev

添加TSX支持

接下来，我们需要添加对TSX的支持。我们可以使用vue-tsx-support包来实现这个功能。

npm install vue-tsx-support --save
# 或者
yarn add vue-tsx-support

我们需要在tsconfig.json中添加以下配置：

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "h"
  }
}

其中，jsx设置为preserve表示不会将JSX语法转换成普通的JavaScript。jsxFactory表示指定JSX标签的替换标识符，默认是React.createElement，但在Vue的情况下可以设置为h。

接下来，我们需要在main.ts中引入vue-tsx-support，并将其安装为Vue的插件：

import Vue from 'vue'
import VueTsx from 'vue-tsx-support'
Vue.use(VueTsx)

这样，我们就完成了对TSX的配置。

添加Eslint支持

在Vue CLI 3创建的项目中，默认使用了Eslint作为代码风格检查工具。而在TypeScript中，为了让Eslint识别TSX语法，我们需要添加相关的Eslint插件和配置。

首先，我们需要安装eslint-plugin-vue、@typescript-eslint/eslint-plugin和@typescript-eslint/parser插件。

npm install eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
# 或者
yarn add eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

接下来，在项目的根目录下，添加一个.eslintrc.js配置文件：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/typescript',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  rules: {
    '@typescript-eslint/explicit-function-return-type': [
      'error',
      {
        allowExpressions: true
      }
    ]
  }
}

在上面的配置中，我们配置了parser为@typescript-eslint/parser，并在extends中添加了@vue/typescript配置，并加上了一些规则，比如强制规定函数返回类型等。

示例说明

示例一：定义一个有状态的组件

我们来举一个简单的例子来展示如何定义一个具有状态的组件。我们创建一个Counter组件，包含一个按钮和一个显示计数的p标签，点击按钮就会将计数器加一，并显示在p标签中。

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

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

@Component
export default class Counter extends Vue {
  private count = 0

  private increment() {
    this.count++
  }
}
</script>

在这个组件中，我们使用了@Component装饰器来将Counter类声明为Vue组件，使用了private关键字来声明私有成员count，并通过increment方法实现了计数器的加1功能。

示例二：使用computed属性

我们在上面的示例中使用了实例私有成员来存储计数器的状态，Vue中还提供了一种更加方便的方式来定义响应式数据，那就是利用计算属性computed。

<template>
  <div>
    <button @click="count++">+</button>
    <p>{{ currentCount }}</p>
  </div>
</template>

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

@Component
export default class Counter extends Vue {
  private count = 0

  private get currentCount() {
    return this.count
  }
}
</script>

在这个示例中，我们通过get关键字定义了一个计算属性currentCount，用来代替上个示例中的实例私有成员count，并将其响应式化。每次count发生变化时，currentCount也会被自动更新。

这就是我们利用Vue CLI 3和TypeScript环境搭建tsx模板的完整攻略，希望对你有所帮助。