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脚手架搭建的项目如何根据开发环境不一样使用不一样的接口地址哪？

这个问题先思考一下吧？若是感受做者写的还能够能够给做者点个关注或者点个赞，想讨论的能够在下面留言

本期结束，谢谢你们的观看