vue2.x选择js和ts新建项目的一些区别

使用vue-cli生成项目的时候可以选择使用默认的js方式,也可以选择使用ts的方式,ts的方式中又有使用class-style方式和非class-style的方式,这三种的区别基本只在script部分的不同。

在选择ts方式生成项目的时候回再寻问是否使用class-style的方式,见下图
vue2.x选择js和ts新建项目的一些区别_第1张图片

js方式生成的项目

<script>
export default {
     
  name: "HelloWorld",
  props: {
     
    msg: String
  }
};
</script>

非class-style方式生成

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
     
  name: 'HelloWorld',
  props: {
     
    msg: String,
  },
});
</script>

class-style方式生成

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

@Component
export default class HelloWorld extends Vue {
     
  @Prop() private msg!: string;
}
</script>

上面三种方式中的不同地方有:
1、ts的会多出两个类型定义文件以及原来的js文件变成ts文件
vue2.x选择js和ts新建项目的一些区别_第2张图片
2、ts的方式中是script多了lang定义语言

你可能感兴趣的:(Vue)