Vue 项目如何在内部新建TS项目

Vue 项目如何在内部新建TS项目,第1张

1.在项目整体新建一个项目文件夹(doc),并在文件夹里新建App.vue,main.ts 两个文件  最外层新建tsconfig.json文件。public新建doc.html文件。

2.APP.vue

3.main.ts文件

4.shims-vue.d.ts 文件 (若不引入 则main.ts中引入App.vue报错)

5.tsconfig.json文件

6.vue.congif.js文件配置更改

7.package.json文件 添加typescript插件  注意版本

首先 创建i18n文件

/lang/index.ts

然后 在main.ts中引入

在vue模板中使用

在外部的ts文件中使用

范例,HelloWorld.vue

使用ts开发时如果要使用第三方js库的同时还想利用ts诸如类型检查等特性就需要声明文件,类

似 xx.d.ts

同时,vue项目中还可以在shims-vue.d.ts中对已存在模块进行补充

npm i @types/xxx

装饰器用于扩展类或者它的属性和方法。@xxx就是装饰器的写法

常见的有@Prop,@Emit,@Watch

具体使用见文章开头的例子

vuex-module-decorators 通过装饰器提供模块化声明vuex模块的方法,可以有效利用ts的类型系

统。

安装

根模块清空,修改store/index.ts

定义counter模块,创建store/counter

装饰器是工厂函数,它能访问和修改装饰目标。

类装饰器,07-decorator.ts

方法装饰器

属性装饰器

稍微改造一下使其可以接收参数


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12048533.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存