vue3使用typescript,ts开发vue
最近需要结合ts的使用对原有的vue项目进行改造。本文阐述了安装vue组件的准备工作。详细介绍了示例代码，具有一定的参考价值。感兴趣的朋友可以参考一下。
:
目录
1.引入Typescript2，配置文件webpack configuration 3，使项目识别。ts4和编写vue组件。data () props中定义的数据传递值完整的代码案例。最近，原来的vue项目需要使用ts进行改造。这应该是中大型项目的发展趋势。看到一个不错的入门教程，结合起来做了一点拓展记录。本文从安装到vue组件编写进行讲解，适合入门。
1、引入Typescript
npm安装vue-类-组件vue-属性-装饰-保存
npm安装ts-loader类型脚本ts lint ts lint-loader ts lint-config-standard-save-dev
Vue-class-component:扩展Vue以支持typescript，并通过声明原始vue语法来支持ts。
Vue-property-decorator:基于vue-class-component扩展更多的decorator。
Ts-loader:使webpack能够识别Ts文件。
Tsint-loader: tsint用于约束文件编码。
tsint-ts lint-config-standard:ts lint配置标准样式的约束。
2、配置文件webpack配置
根据项目的配置不同，如果vue cli 3.0创建的项目需要在vue.config.js中配置，如果是3.0以下则需要在webpack.base.conf中配置(webpack.base.conf文件中更改了以下说明)
补充。ts to resolve.extensions，以便在不编写代码的情况下将ts文件引入代码。ts后缀。
解决：{
扩展名：[。js ，。vue ，。json ，。ts]，
别名：{}
}
在模块规则中添加ts规则
模块：{
规则：[
{
测试：/\。ts美元/，
排除：/node_modules/，
强制：“前”，
加载程序：“tslint-loader”
},
{
测试：/\。tsx？$/,
加载程序：“ts-loader”，
排除：/node_modules/，
选项：{
appendTsSuffixTo: [/\。vue$/]
}
}
]
}
Tsconfig.json配置
Ts-loader将检索文件中的Tsconfig.json，并根据其规则解析ts文件。详细配置请参考https://www.tslang.cn/docs/handbook/tsconfig-json.html。
粘贴测试项目tsconfig.json文件。
{
//编译选项
编译器选项:{
//输出目录
outDir :。/output ，
//有没有可以用来调试的sourceMap？
sourceMap: true，
//在严格模式下解析
strict: false，
//采用模块系统
模块: esnext ，
//如何处理模块
moduleResolution“:”节点，
//编译输出目标ES版本
目标: es5 ，
//允许从没有默认导出集的模块进行默认导入。
allowSyntheticDefaultImports :true，
//将每个文件视为单独的模块
isolatedModules: false，
//启用装饰器
“实验记录员”:对，
//启用设计类型元数据(用于反射)
emitedecoratormeta data :true，
//当表达式和声明中有隐含的any类型时，会报告错误
noImplicitAny: false，
//当并非函数的所有返回路径都有返回值时，会报告错误。
noImplicitReturns: true，
//从tslib导入外部帮助库：如__extends、__rest等。
importHelpers :对，
//在编译期间打印文件名
listFiles: true，
//删除注释
removeComments: true，
suppressImplicitAnyIndexErrors :true，
//允许编译javascript文件
allowJs: true，
//解析非相对模块名的基目录
baseUrl“:”。/,
//指定特殊模块的路径
路径:{
jquery: [
node _ modules/jquery/dist/jquery
]
},
//编译时需要引入的库文件列表
lib: [
多姆，
es2015 ，
es2015.promise
]
}
}
Tslint.json配置
在目录中新增tslint.json文件，由于我们前面安装了tslint-config-standard，所以可以直接用ts棉绒-配置-标准中规则，文件如下：
{
扩展： tslint-config-standard ，
全局:{
要求：对
}
}
3、让项目识别.ts
由于以打字打的文件默认并不支持*.某视频剪辑软件后缀的文件，所以在某视频剪辑软件项目中引入的时候需要创建一个vue-shim.d.ts文件，放在根目录下
声明模块"*"。vue {
从“Vue”导入Vue
导出默认某视频剪辑软件
}
4、vue组件的编写
某视频剪辑软件组件里大多数的方法改成通过@xxx(装饰器)来表明当前定义的为什么数据，类似尼日利亚中的注入。而业务逻辑射流研究…的部分就可以直接采用分时（同分时)的写法了。
基本写法
模板模板和样式风格的写法不变，脚本的模块进行了改变，基本写法如下：
脚本语言
从" vue-属性-装饰"导入{ Component，Vue }；
@组件
导出默认类测试扩展Vue {
};
/脚本
lang=ts :脚本张声明下当前的语言是分时（同分时)
@组件：注明此类为一个某视频剪辑软件组件
导出默认类测试扩展Vue:导出当前组件类是继承某视频剪辑软件的
data()中定义数据
数据中的数据由原来的数据()方法改成直接在对象中定义
导出默认类测试扩展Vue {
公共消息1:string=黑马鱼；
公共消息2: string=真好看；
}
props传值
小道具的话就没有数据那么舒服了，因为他需要使用装饰器了，写法如下
@Prop()
普帕：字符串
@Prop()
propB:编号
$emit传值
不带参数
//原来写法：这个emit(bindSend )
//现在直接写this.bindSend()
//多个定义
@Emit()
bindSend():string{
返回此消息
}
方法带参数
//原来写法：这个emit(bindSend ，msg)
//现在直接写：this.bindSend(消息)
//多个下面的定义
@Emit()
宾森德(消息：字符串){
//做某事
}
发射带参数
//这里的试验是改变组件引用的@事件名称这时候要写@测试而不是@bindSend2
@Emit(测试)
私有bindSend2(){
}
看观察数据
//原来的写法观察：{}
@Watch(propA ，{
深：真的
})
测试(新值：字符串，旧值：字符串){
console.log(propA值改变了新值)；
}
计算计算属性
public get computedMsg(){
返回这里是计算属性这条消息
}
公共集computedMsg(消息：字符串){
}
完整代码案例
模板
"测试容器"
{ {消息}}
输入类型=按钮值=点击触发父级方法@click=bindSend/
输入类型=按钮值=点击触发父级方法@click=handleSend/
输入类型=按钮值=点击触发父级方法@click=bindSend2/
！你好/你好
/div
/模板
脚本语言
从" vue-属性-装饰"导入{组件，道具，Vue，手表，发射}；
从导入你好./你好世界。vue ；
//注明此类为一个某视频剪辑软件组件
@组件({
组件：{
你好
}
})
导出默认类测试扩展Vue {
//原有数据中的数据在这里展开编写
公共消息：string= asd
//原有小道具中的数据展开编写
@Prop({
类型：数量，
默认值：1,
必填：假
})
普帕？数字
@Prop()
propB:字符串
//原有计算
public get computedMsg(){
返回这里是计算属性这条消息
}
公共集computedMsg(消息：字符串){
}
//原有的看属性
@Watch(propA ，{
深：真的
})
公共测试（新值：字符串，旧值：字符串){
console.log(propA值改变了新值)；
}
//以前需要给父级传值的时候直接方法中使用发射就行了，当前需要通过发射来处理
@Emit()
private bindSend():string{
返回此消息
}
@Emit()
private bindSend1(msg:string，love:string){
//如果不处理可以不写下面的，会自动将参数回传
//msg= love ；
//返回消息；
}
//原有放在方法中的方法平铺出来
公共handleSend():void {
this.bindSend1(this.message，爱);
}
//这里的emit中的参数指示父级接受什么，类似于前面的$emit(“父级定义的方法”)
@Emit(test )
私有bindSend2(){
返回“这可以通过测试接受”；
}
}
/脚本
关于vue项目中ts(typescript)的入门教程这篇文章到此为止。有关vue typescript的更多相关介绍性内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。