vue+typescript项目构建以及ts与js写法对比

1.安装Vue CLI

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

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

2.构建项目

vue create my-project

这里选择第二个（Manually select features）。上下键控制光标，回车确认。

根据需要选择要安装的插件。上下键控制光标，空格切换选中状态，回车确认。
接下来就是一路回车，等待安装依赖，项目构建完成。

2.ts与js写法对比

ts写法

<template>
  <div class="home">
  </div>
</template>

<script lang="ts">
import {
     Component, Vue, Prop, PropSync, Model, Watch, Provide, Inject, Emit, Ref } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

const symbol = Symbol('baz');

@Component({
    
  components: {
    
    HelloWorld,
  },
})
export default class Home extends Vue {
    
  @Prop(Number) readonly propA: number | undefined;
  @Prop({
     default: 'default value' }) readonly propB!: string;
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined;

  @PropSync('name', {
     type: String }) syncedName!: string;

  @Model('change', {
     type: Boolean }) readonly checked!: boolean;

  @Watch('child')
  onChildChanged(val: string, oldVal