vue中使用typescript配置步骤

下面给出使用TypeScript来编写Vue单文件组件的详细步骤：

1. 创建Vue项目

首先我们需要创建一个Vue项目，可以通过Vue CLI来创建，例如执行以下命令：

vue create my-project

1. 安装TypeScript

在创建完Vue项目后，需要安装TypeScript，可以在命令行中执行以下命令：

npm install --save-dev typescript

1. 配置TypeScript

在安装完TypeScript后，我们需要在项目中进行配置。

首先，在项目的根目录创建一个 tsconfig.json 文件，并添加以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["webpack-env", "jest"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.vue"],
  "exclude": ["node_modules"]
}

这些配置包含了一些常用的TypeScript选项，例如 target、module、strict等。

其次，在项目的根目录创建一个 shims-vue.d.ts 文件，并添加以下内容：

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

这样我们就可以在使用Vue单文件组件时，正确的类型检查。

最后，在 babel.config.js 文件中，添加以下配置：

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        useBuiltIns: 'cause'
      }
    ]
  ]
}

这里的 cause 表示使用 @babel/preset-env 的 usage 模式。

1. 引入Vue TypeScript支持库

我们需要安装 vue-property-decorator 和 vuex-class 来引入Vue TypeScript支持库。可以在命令行中执行以下命令：

npm install --save-dev vue-property-decorator vuex-class

1. 配置Webpack和Vue Loader

为了让Webpack和Vue Loader正确的解析Vue单文件组件，需要添加以下配置：

在 babel.config.js 文件中，添加以下插件：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
}

这里的 vant 是我们使用的组件库，如果你需要使用其他组件库，需要将 libraryName 和 libraryDirectory 改为对应的名称。

在 vue.config.js 文件中，添加以下配置：

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json', '.ts']
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          enforce: 'pre',
          loader: 'tslint-loader'
        },
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: { appendTsSuffixTo: [/\.vue$/] }
        }
      ]
    }
  }
}

这里的配置包含了 resolve、module、rules 等选项。注意到在 module.rules 中，我们添加了一条对 .ts 文件的tslint-loader和一条对 .tsx 文件的ts-loader，ts-loader 的 options 配置中的 appendTsSuffixTo: [/\.vue$/] 表示在解析 *.vue 文件时，自动追加 .ts 后缀，使得Vue单文件组件中使用的语言为 TypeScript。

1. 使用TypeScript编写Vue单文件组件

现在我们可以创建一个 *.vue 文件，并且使用 TypeScript 来编写代码了。

例如，在 HelloWorld.vue 文件中，我们可以这样写：

<template>
  <div>Hello {{ name }}!</div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  name: string = 'World'
}
</script>

这里的 @Component 是 vue-property-decorator 提供的装饰器。在这个装饰器中，我们可以使用一些属性和方法，例如 props、computed、methods 等。

1. 示例

可以查看以下两个示例项目，在这两个项目中，我们分别使用了Vue.js和Vuetify.js来创建了一个带有TypeScript支持的网站：

Vue.js + TypeScript: https://github.com/Water-Fox/Vue-TypeScript-Project

Vuetify.js + TypeScript: https://github.com/Water-Fox/Vue-Vuetify-TypeScript-Project