Vue2 Vue-cli中使用Typescript的配置详解


Posted in Javascript onJuly 24, 2017

前言

因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧。

一、初步配置

首先安装官方插件vue-class-component,vue-property-decorator,配置webpack。
webpack配置如下:

修改入口文件

entry: {
 app: './src/main.ts'
}

resolve部分:

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

配置loader

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
 }

配置tsconfig.json

{
 "include": [
 "src/**/*"
 ],
 "exclude": [
 "node_modules"
 ],
 "compilerOptions": {
 "allowSyntheticDefaultImports": true,
 "experimentalDecorators": true,
 "allowJs": true,
 "module": "es2015",
 "target": "es5",
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "isolatedModules": true,
 "lib": [
  "dom",
  "es5",
  "es2015.promise"
 ],
 "sourceMap": true,
 "pretty": true
 }
}

二、实战!

配好配置只是第一步,在项目里跑起来才是王道。

在vue文件的script标签里添加lang='ts'

因为ts-loader不像配过loader的webpack一样知道vue,html等文件是什么东西,你跑起来后会报模块无法解析的错误,所以还需要配置.d.ts声明文件

vue的如下配置

declare module "*.vue" {
 import Vue from 'vue';
 export default Vue;
}

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

declare module "*.html" {
 let template: string;
 export default template;
}

配置好之后ts就能理解这些模块了

从vue-property-decorator引入需要用到的模块

(一般只用到Component, Vue, Watch, Prop这四个,其它3个没用到也没研究,知道的大佬可以解释下。)

import { Component, Vue, Watch } from 'vue-property-decorator'

这里拿之前写的sidbar的代码当个栗子:

class HoverTopElem {
 leaveTop: number = -200
 top: number = null
 height: number = null

 show(e) {
 this.top = e.target.getBoundingClientRect().top
 this.height = e.target.clientHeight
 }
 hidden() {
 this.top = this.leaveTop
 }
}

@Component({
 name: 'sidebar',
 template: template,
 components: {
 sidebarItem
 }
})
export default class Sidebar extends Vue {
 SidebarMenu: any = SidebarMenu
 hoverTopElem: HoverTopElem = new HoverTopElem()
 activeListItemName: string = null
 activeRouteItemRoute: string = null

 get _activeRouteItemRoute(): string {
 return this.$route.path
 }

 @Watch('_activeRouteItemRoute', { immediate: true })
 onRouteChanged(val: any) {
 this.activeRouteItemRoute = val
 }

 changeList(param) {
 this.activeListItemName = param
 }

 changeRoute(param) {
 this.activeRouteItemRoute = param
 }
}

元数据写在@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,不然一些ts语法不会被识别,像public修饰符之类的,因为ts还不是很熟练就没想着配,有兴趣的朋友可以试试。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
javascript页面倒计时实例
Jul 25 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 #Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 #Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 #Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 #Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 #Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 #Javascript
React 子组件向父组件传值的方法
Jul 24 #Javascript
You might like
做一个有下拉功能的留言版
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Numpy数组的广播机制的实现
2020/11/03 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
技校生自我鉴定
2013/12/08 职场文书
报告会主持词
2014/04/02 职场文书
贺卡寄语大全
2014/04/11 职场文书
政府门卫岗位职责
2014/04/29 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书