VueJS + TypeScript 入门第一课

Posted 2021-03-07 zhourongcode

楔子

伴随着 Vue 新版本发布对 TypeScript 支持越来越好。当然值得在项目中使用优秀的技术栈。

学习要求背景知识

* NodeJs
* NpmJs
* VueJS
* TypeScript

创建 VueJS - TypeScript 项目

使用官方推荐的脚手架 Vue Cli

vue create VueJs-TypeScript // 项目名为 VueJs-TypeScript，另外创建过程中，请选 "Manually select features"，后选中 TypeScript

第一种写组件的方式

该目录：src/components/HelloWorld.vue
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  firstName = "Hello World!"
  lastName = 'Hello Wrold'
  counter = 0
  mounted() {
    console.log('mounted')
  }
  get fullName(): string {
    return this.firstName + this.lastName
  }
  IncrementCounter() {
    this.counter++
  }
}

第一种引用组件的方式

该目录为：src/App.vue
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}

第二种写组件的方式

该目录：src/components/HelloWorld.vue
import Vue from 'vue'

export default Vue.extend({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      test: "Hello TS!" as string
    }
  },
  methods: {
    pressMe(): string {
      return this.test + 'banana'
    }
  }
})

第二种使用组件的方式

该目录为：src/App.vue
import Vue from 'vue'
import HelloWorld from './components/HelloWorld.vue';

export default Vue.extend({
  name: 'App',
  components: {
    HelloWorld
  }
})

总结

代码详情点击此处链接
VueJs 框架何 ReactJs 框架在写业务方面越来越接近，这对于开发者其实是一件好事。你喜欢哪一个框架就使用且学习它。