TypeScript(03)——vue全家桶中如何使用TypeScript语法合集

文章目录

  • 前言
  • 正文
    • 一、准备工作
      • 1.1安装vue cil4
      • 1.2新建项目
      • 1.3 在vue中书写ts的必备插件!
    • 二、ts写vue单文件写法
      • 2.1单页面格式怎么写
        • 2.1.1 vue项目中的mian.ts及app.vue
      • 2.2 如何在Data双向绑定值
      • 2.3 如何引入子组件及组件传值
      • 2.4 生命周期的用法
      • 2.5 methods方法
      • 2.6 计算属性(computed)和监听属性(watch)
      • 2.7 Mixins混入如何使用
        • 2.7.1 Mixins文件的写法
        • 2.7.2 调用Mixins的vue文件写法
      • 2.8 路由vue-Router及路由守卫
        • 2.8.1 安装导入路由—— mian.ts
        • 2.8.2 路由index文件写法—— router/index.ts
        • 2.8.3 在页面中如何使用路由守卫
          • 全局的路由守卫,js和ts的写法一致;
          • 组件内路由守卫
      • 2.9 vuex
        • 2.9.1 vuex/scr/store/index.ts写法
        • 2.9.2 vuex调用单页面的写法
      • 2.10 axios请求数据
        • 2.10.1 main.ts
        • 2.10.2 单页使用
      • 2.11 使用less/sass/scss
    • 附:js常规书写vue--demo源码
    • demo-上述代码用Ts书写vue
  • 结语

前言

之前已经学过TypeScript函数,class类其他语法及ts在html页面中如何使用案例;
这篇学习如何在vue项目中使用ts,其中包含:组件,axios请求,vuex,父子组件传值,Mixins等。。。
为了更方便理解,我把在vue中常用功能点代码用js/ts写法分开书写,如果你对vue比较熟悉的,可以直接跳转到最后,最后附有demo源码;

正文

一、准备工作

1.1安装vue cil4

npm install -g @vue/cli
npm install -g @vue/cli-service-global

1.2新建项目

vue create vue-ts-sticky

按步骤开始安装,安装过程中选择TypeScript,vuex,路由router;
使用npm run serve启动项目

1.3 在vue中书写ts的必备插件!

vue-class-component 强化 Vue 组件,使用装饰器语法使 Vue 组件更好的跟TS结合使用。
vue-property-decorator在 vue-class-component 的基础上增加了更多与 Vue 相关的装饰器,使Vue组件更好的跟TS结合使用。

npm i vue-class-component -s-d
npm i  vue-property-decorator -s-d

二、ts写vue单文件写法

2.1单页面格式怎么写

vue单页面的格式的写法不变,同样由template、script、style组成;
唯一区别:

你可能感兴趣的:(TypeScript)