资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/在Vue2，Vue-cli中使用Typescript需要的配置

在Vue2，Vue-cli中使用Typescript需要的配置

dance / 1734人阅读

摘要：这里拿之前写的的代码当个栗子元数据写在配置里，像名字，用到的组件啥的，然后说下之前里用到的各个实例属性方法在这里怎么用这个是最常用的，像上面的这里一共声明了个，注意这里声明的变量一定要赋一个值，没有就不能是，不然这个数据就不是响应的。

公司的团队最近热衷于vue框架，新项目想着练练typescript，于是开始了vue+ts的踩坑之路...
本文意在为和我有一样想法的伙伴们省去踩坑的时间

1.初步配置

首先安装官方插件vue-class-component，vue-property-decorator，配置webpack。
webpack配置如下：
修改入口文件

</>复制代码 
  1. entry: {
  2.   app: "./src/main.ts"
  3. }

resolve部分：

</>复制代码 
  1. extensions: [".js", ".vue", ".json", ".ts", ".tsx"]

配置loader

</>复制代码 
  1. {
  2.     test: /.tsx?$/,
  3.     loader: "ts-loader",
  4.     exclude: /node_modules/,
  5.     options: {
  6.       appendTsSuffixTo: [/.vue$/],
  7.     }
  8.   }

配置tsconfig.json

</>复制代码 
  1. {
  2.   "include": [
  3.     "src/**/*"
  4.   ],
  5.   "exclude": [
  6.     "node_modules"
  7.   ],
  8.   "compilerOptions": {
  9.     "allowSyntheticDefaultImports": true,
  10.     "experimentalDecorators": true,
  11.     "allowJs": true,
  12.     "module": "es2015",
  13.     "target": "es5",
  14.     "moduleResolution": "node",
  15.     "experimentalDecorators": true,
  16.     "isolatedModules": true,
  17.     "lib": [
  18.       "dom",
  19.       "es5",
  20.       "es2015.promise"
  21.     ],
  22.     "sourceMap": true,
  23.     "pretty": true
  24.   }
  25. }

2.实战！
配好配置只是第一步，在项目里跑起来才是王道。
在vue文件的script标签里添加lang="ts"
因为ts-loader不像配过loader的webpack一样知道vue,html等文件是什么东西，你跑起来后会报模块无法解析的错误，所以还需要配置.d.ts声明文件
vue的如下配置

</>复制代码 
  1. declare module "*.vue" {
  2.   import Vue from "vue";
  3.   export default Vue;
  4. }

你也可以为其它的非js模块配置.d.ts文件
如html（告诉ts-loader把html理解成字符串）

</>复制代码 
  1. declare module "*.html" {
  2.   let template: string;
  3.   export default template;
  4. }

配置好之后ts就能理解这些模块了
从vue-property-decorator引入需要用到的模块
（一般只用到Component, Vue, Watch, Prop这四个，其它3个没用到也没研究，知道的大佬可以解释下。）
import { Component, Vue, Watch } from "vue-property-decorator"
这里拿之前写的sidbar的代码当个栗子：

</>复制代码 
  1. class HoverTopElem {
  2.   leaveTop: number = -200
  3.   top: number = null
  4.   height: number = null
  5.   show(e) {
  6.     this.top = e.target.getBoundingClientRect().top
  7.     this.height = e.target.clientHeight
  8.   }
  9.   hidden() {
  10.     this.top = this.leaveTop
  11.   }
  12. }
  13. @Component({
  14.   name: "sidebar",
  15.   template: template,
  16.   components: {
  17.     sidebarItem
  18.   }
  19. })
  20. export default class Sidebar extends Vue {
  21.   SidebarMenu: any = SidebarMenu
  22.   hoverTopElem: HoverTopElem = new HoverTopElem()
  23.   activeListItemName: string = null
  24.   activeRouteItemRoute: string = null
  25.   get _activeRouteItemRoute(): string {
  26.     return this.$route.path
  27.   }
  28.   @Watch("_activeRouteItemRoute", { immediate: true })
  29.   onRouteChanged(val: any) {
  30.     this.activeRouteItemRoute = val
  31.   }
  32.   changeList(param) {
  33.     this.activeListItemName = param
  34.   }
  35.   changeRoute(param) {
  36.     this.activeRouteItemRoute = param
  37.   }
  38. }

元数据写在@Component配置里，像名字，用到的组件啥的，然后说下之前vue里用到的各个实例属性方法在这里怎么用：

data: 这个是最常用的，像上面的SidebarMenu（这里一共声明了4个），注意这里声明的
变量一定要赋一个值，没有就null,不能是undefined，不然这个数据就不是响应的。因此HoverTopElem类里的属性也是要有初始值，不然这些属性也不是响应的

computed: 这里就是get函数，注意tsconfig.jsonp不配置"target": "es5"这里会报错

prop: vue-property-decorator里面有Prop模块，也可以在元数据声明这个prop，然后在类里声明一下这个变量就可以了，个人推荐第一种

watch: vue-property-decorator里的Watch模块

methods: 方法像data一样直接写在类里就可以了（注意不要和周期钩子同名）
各种生命周期钩子: 直接写就行
路由钩子见vue-class-component文档

至此，基本就可以像原来一样写vue组件了。

当然如果要想和原来一样写ts,还需要配置tslint,vue-cli自带的eslint不识别一些ts语法，像public修饰符之类的，导致编译失败，因为ts还不是很熟练就没想着配，有兴趣的朋友可以试试。

GPU云服务器 云服务器 怎样在oss中使用带ip限制的访问控制 在php中使用组件 在VBScript中使用类 webrtc在webview中使用问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84236.html

相关文章

  • 前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

    摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...

    izhuhaodev 评论0 收藏0

  • Vue2.5+ Typescript 引入全面指南

    摘要：引入全面指南系列目录引入全面指南引入全面指南篇写在前面写这篇文章时的我，使用经验三个多月，完全空白，花了大概三个晚上把手头项目迁移至，因此这篇文章更像个入门指引。见文章引入全面指南篇完整代码见库，分支为整合示例，分支为不含的基础示例。 Vue2.5+ Typescript 引入全面指南 系列目录： Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescrip...

    liangzai_cool 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

发表评论

登陆后可评论

0条评论

dance

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<