VUE使用typescript搭建项目

使用脚手架vueCli工具搭建选择自定义模块

选择自定义模块(作者选择是以下几种)

注意:这里一路y下去就行了需要自己选择的根据自己的喜好选择想用的工具

安装完成在这里进行开发还有点吃力

  1. 作者推荐三个插件

好了安装完成就开始ts版本的开发体验了

组件的使用

  1. 需要引入Component方法,可以在vue-class-component中引入也可以在自己安装的插件vue-property-decorator中引入

    注意:在书写页面中如果不使用 Component 方法会报错

  2. 导出组件需要使用es6类继承的方法继承Vue

    如:export default class HelloWorld extends Vue

  3. 若果需要定义props需要使用@Prop,使用方法如下:

    定义HelloWord.vue组件

    import { Component, Prop, Vue } from 'vue-property-decorator'
    @Component
    export default class HelloWord extend Vue{
    	// private使用的是typescript语法,具体理解为:私有的 
        @Prop() private msg!: string;
    }
    
  4. 父组件中如何使用HelloWord.vue组件哪?方法如下:

    import { Component, Vue } from "vue-property-decorator";
    import HelloWorld from "@/components/HelloWorld.vue";
    @Component({
        name: 'Home',
        components: {
            HelloWorld
        }
    })
    export default class Home extends Vue {
        // 常规js中的data属性可以直接在下面书写
        msg = '123'
    	// vue声明周期函数方法和之前一样
    	mounted() {
            console.log(this.msg)
        }
    }
    
  5. computed计算属性的使用

    • 使用 getset
  6. watch的使用
    使用@Watch装饰器

    import { Watch } from 'vue-property-decorator'
    @Wtach('phone')
    // 这里是装饰器执行的方法
    phoneType(newValue, oldValue){
        conosle.log(newValue, oldValue)
    }
    

接下来vueCli使用typescript基础搭建完毕

接下来有一个问题需要思考,使用VueCli脚手架搭建的项目如何根据开发环境不同使用不同的接口地址哪?

这个问题先思考一下吧?如果感觉作者写的还可以可以给作者点个关注或者点个赞,想讨论的可以在下面留言

本期结束,谢谢大家的观看

https://juejin.im/post/5ed75c54e51d4578a2555751

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论