PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

关于Vue2 Vue-cli中使用Typescript的配置介绍

不言
不言 原创
2018-06-29 15:52:43 1890浏览

这篇文章主要介绍了关于vue2 vue-cli中使用typescript的配置介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流。下面这篇文章主要给大家介绍了关于Vue2 Vue-cli中使用Typescript的配置的相关资料,需要的朋友可以参考下。

前言

因为最近公司的团队热衷于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还不是很熟练就没想着配,有兴趣的朋友可以试试。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何解决关于Vue背景图打包之后访问路径错误的问题

基于casperjs和resemble.js实现一个像素对比服务

在vue项目创建的后初始化首次使用stylus安装方法的介绍

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。