Vue-cli3中使用TS语法示例代码

使用Vue-cli3中使用TS语法需要进行以下步骤：

1. 创建Vue-cli3项目

使用Vue-cli3创建项目需要先安装Vue-cli3，安装命令为：

npm install -g @vue/cli

创建项目的命令为：

vue create my-project

其中my-project是你要创建的项目名称。

1. 安装TypeScript

在创建好的Vue-cli3项目中，需要安装TypeScript依赖，可以使用以下命令进行安装：

npm install typescript ts-loader --save-dev

其中typescript是TypeScript的编译器，ts-loader是Webpack的TypeScript加载器。

1. 配置TypeScript

在Vue-cli3项目根目录下创建tsconfig.json文件，作为TypeScript的配置文件。

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

其中包含了编译TypeScript的基本配置。

1. 编写TypeScript代码

创建.ts或.tsx文件来编写TypeScript代码，例如：

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class HelloWorld extends Vue {
  msg: string = 'Welcome to Your Vue.js + TypeScript App';
}

在这个示例中，我们使用了vue-class-component库来提供类式组件的装饰器以及其他功能。

1. 在Vue组件中使用TypeScript

在Vue组件中使用TypeScript需要用到<script lang="ts">标签来编写TypeScript代码：

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class HelloWorld extends Vue {
  msg: string = 'Welcome to Your Vue.js + TypeScript App';
}
</script>

需要注意的是，在<script>标签中，我们使用了lang="ts"来表示这是一段TypeScript代码。

以上就是Vue-cli3中使用TS语法的完整攻略，其中我们安装了TypeScript依赖，创建了配置文件，编写了TypeScript代码，并在Vue组件中使用了TypeScript。