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: string) {}

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val, oldVal) {}

  @Watch('person')
  onPersonChanged2(val, oldVal) {}

  @Inject() readonly foo!: string;
  @Inject('bar') readonly bar!: string;
  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string;
  @Inject(symbol) readonly baz!: string;

  @Provide() foo1 = 'foo';
  @Provide('bar') baz1 = 'bar';

  count = 0;

  @Emit()
  addToCount(n: number) {
    this.count += n;
  }

  @Emit('reset')
  resetCount() {
    this.count = 0;
  }

  @Emit()
  returnValue() {
    return 10;
  }

  @Emit()
  onInputChange(e) {
    return e.target.value;
  }

  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }

  @Ref() readonly anotherComponent;
  @Ref('aButton') readonly button!: HTMLButtonElement;

  mounted() {
    console.log('mounted');
  }
}
script>

js写法

<template>
  <div class="home">
  div>
template>
<script lang="js">
import HelloWorld from '@/components/HelloWorld.vue';

const symbol = Symbol('baz');

export default {
  components: {
    HelloWorld,
  },
  props: {
    propA: {
      type: Number,
    },
    propB: {
      default: 'default value',
    },
    propC: {
      type: [String, Boolean],
    },

    // @PropSync
    name: {
      type: String,
    },

    // @Model
    checked: {
      type: Boolean,
    },
  },

  // @Model
  model: {
    prop: 'checked',
    event: 'change',
  },

  inject: {
    foo: 'foo',
    bar: 'bar',
    optional: { from: 'optional', default: 'default' },
    [symbol]: symbol
  },
  data() {
    return {
      foo: 'foo',
      baz: 'bar'
    }
  },
  provide() {
    return {
      foo1: this.foo,
      bar1: this.baz
    }
  },

  computed: {
    // @PropSync
    syncedName: {
      get() {
        return this.name;
      },
      set(value) {
        this.$emit('update:name', value);
      }
    },

    // @Ref
    anotherComponent: {
      cache: false,
      get() {
        return this.$refs.anotherComponent;
      }
    },
    button: {
      cache: false,
      get() {
        return this.$refs.aButton as HTMLButtonElement;
      }
    },
  },

  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false
      }
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false
      }
    ]
  },
  methods: {
    // @Watch
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {},

    // @Emit
    addToCount(n) {
      this.count += n;
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0;
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
    },
    promise() {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      });

      promise.then(value => {
        this.$emit('promise', value)
      })
    }
  },
  
  mounted() {
    console.log('mounted');
  }
}
script>