VueCli3构建TS项目的方法步骤

下面是关于使用VueCli3构建TS项目的攻略：

1. 安装 VueCli3

如果你尚未安装VueCli3，需要使用以下命令进行安装：

npm install -g @vue/cli

2. 创建项目

创建项目时，需要选择"Manually select features"，并勾选TypeScript、Linter / Formatter等功能。命令如下：

vue create my-project

在选择配置时，需要按照自己的实际情况进行选择。如果未选择TypeScript，则需要在项目中手动添加TypeScript支持。

3. 配置项目

为了使项目支持TypeScript，需要对项目进行一些配置。

配置tsconfig.json

VueCli3创建项目时，会在项目根目录下自动生成tsconfig.json文件。但默认生成的tsconfig.json并不适合我们的项目，需要进行修改。

以下是常用的tsconfig.json配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "webpack-env",
      "jest"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.spec.tsx"
  ]
}

配置babel.config.js

为了使项目支持装饰器等更高级的语法特性，需要配置babel。在项目根目录下创建babel.config.js文件，并添加以下配置：

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['@babel/plugin-proposal-decorators', {
      'legacy': true
    }],
    ['@babel/plugin-proposal-class-properties', {
      'loose': true
    }]
  ]
}

4. 创建组件

在项目中创建一个名为MyComponent.vue的组件，并在其中写入以下代码：

<template>
  <div>{{ message }}</div>
</template>

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

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello, World!'
}
</script>

在<script>标签中，需要使用vue-property-decorator库来给MyComponent类添加装饰器。

5. 使用组件

在App组件中引入MyComponent组件，并将其添加到template中。

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

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

@Component({
  components: {
    MyComponent
  }
})
export default class App extends Vue {}
</script>

示例1

下面是一个基于VueCli3 + TypeScript的TodoList示例项目：https://github.com/Dream4ever/vue-cli3-ts-todolist。

示例2

下面是一个使用VueCli3 + TypeScript创建的一个基础的后台管理系统项目：https://github.com/L-Chris/vue-ts-admin。该项目具体介绍请参考项目README.md文件。