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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
JS 控制CSS样式表
Aug 20 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
基于python的字节编译详解
2017/09/20 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python如何进行时间处理
2020/08/06 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
环保建议书400字
2014/05/14 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
运动会演讲稿200字
2014/08/25 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
在校学生证明格式
2015/06/24 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python