这篇文章主要介绍了关于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背景图打包之后访问路径错误的问题
如何解决关于Vue背景图打包之后访问路径错误的问题
如何解决关于Vue背景图打包之后访问路径错误的问题
以上就是关于Vue2 Vue-cli中使用Typescript的配置介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748080.html
