VUE使用typescript搭建项目

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

选择自定义模块（作者选择是以下几种）

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

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

1. 作者推荐三个插件

   • vue-property-decorator 这个插件是对 vue-class-component(官方)插件的一个扩展 npm插件地址

     常用插件方法如下

     • @Prop
     • @PropSync
     • @Model
     • @Watch
     • @Provide
     • @Inject
     • @ProvideReactive
     • @InjectReactive
     • @Emit
     • @Ref
     • @Component (provided by vue-class-component)
     • Mixins (the helper function named mixins provided by vue-class-component)

   • vuex-class绑定vuex和vue的助手插件 npm插件地址

     常用插件方法如下

     • State,
       Getter,
       Action,
       Mutation,
       namespace
       

   • vuex-persistedstate 这个插件顾名思义的意思就是vuex状态持久保存插件 具体的使用方法请看文档 npm地址 vuex-persistedstate

     常用插件方法如下

     • plugins: [
           createPersistedState({
             storage: {
               window.sessionStorage
             },
           }),
         ],
       

好了安装完成就开始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计算属性的使用

   • 使用 get 和 set

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

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

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

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

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

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