vue cli4.0项目引入typescript的方法

第一步：安装Vue CLI 和 Typescript

首先，你需要安装 Vue CLI 和 Typescript。运行如下命令：

npm install -g @vue/cli

npm install -g typescript

第二步：创建 Typescript 项目

使用 Vue CLI 创建一个新的项目，并选择手动配置，勾选需要的特性。运行如下命令：

vue create my-project

cd my-project

vue add @vue/typescript

第三步：修改配置文件

修改文件中的 tsconfig.json 文件，配置如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["webpack-env", "jest"],
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

修改 vue.config.js 文件配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('ts')
      .test(/\.tsx?$/)
      .use('ts-loader')
      .loader('ts-loader')
      .options({
        appendTsSuffixTo: [/\.vue$/],
      });
  },
};

第四步：创建一个 TypeScript 组件

<template>
  <div>
    <h1>My TypeScript Component</h1>
    <p>{{message}}</p>
  </div>
</template>

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

@Component
export default class TypeScriptComponent extends Vue {
  private message: string = 'Hello, TypeScript!';
}
</script>

第五步：引用 TypeScript 组件

在父组件中引用 TypeScript 组件：

<template>
  <div>
    <h1>My TypeScript App</h1>
    <TypeScriptComponent />
  </div>
</template>

<script>
import TypeScriptComponent from './TypeScriptComponent.vue';

export default {
  name: 'App',
  components: {
    TypeScriptComponent,
  },
};
</script>

至此，你已经成功的在 Vue CLI 4.0 项目中引入 TypeScript。