vue+typescript,vue3使用typescript
主要介绍vue中使用的typescript的配置，通过示例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
:
目录
1.将TypeScript引入到vue的旧项目中，并从头开始创建vue typescript项目。通过前端框架的开发，比如vue3.0，react和angular框架的源代码都是用ts(typescript)写的，所以我感觉未来中大型项目的发展趋势都离不开ts。所以我根据一些入门教程，用vue结合ts编写了一个文档，适合vue ts项目的入门配置。
1、vue老项目引入TypeScripe
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配置标准样式的约束，也用于标准化ts代码的样式。
注意：ts这样安装是为了把原来vue项目中的Js语法修改成Ts。详细步骤请参考https://www.jb51.net/article/230703.htm.这篇博客并没有完整的展示如何在vue.config.js或者较低版本的webpack.base.conf中配置和支持ts语法，所以我修改如下：
//对于文件插件配置，需要写在对象configureWebpack中。
模块.导出={
configureWebpack: {
解析：{扩展：[。ts ，。tsx ，。js ，。json] }，
模块：{
规则：[
{
测试：/\。ts美元/，
排除：/node_modules/，
强制：“前”，
加载程序：“tslint-loader”
},
{
测试：/\。tsx？$/,
加载程序：“ts-loader”，
排除：/node_modules/，
选项：{
appendTsSuffixTo: [/\。vue$/]，
}
}
]
}
}
}
从零开始创建vue+typescript项目
这个方法比较简单。使用命令vue create app-name创建项目时，可以通过选择custom来创建项目，如下所示：
第二步：只需选择以上项目，在终端中使用空格键选择，然后按回车键。这些选项的含义如下：
(*)巴别塔//ES6到ES5
(*)打字稿//使用ts
()渐进式网络应用(PWA)支持//渐进式网络应用
(*)路由器//路由
(*) Vuex //状态管理
(*) CSS预处理//CSS预处理
(*) Linter/Formatter //规格类型
()单元测试//测试
()E2E测试//测试
下一步的配置细节如下：
使用类样式的组件语法？(Y/n)是否类类样式组件语法输入Y回车？
在TypeScript旁边使用Babel(现代模式所需，自动检测的聚合填充，trans
皮林JSX)？(Y/n)是否使用Babel和TypeScript(现代模式，自动检测多边形填充，trans要求(JSX)输入Y回车？
对路由器使用历史模式？(产品中的索引回退需要正确的服务器设置
Ion) (Y/n)是否使用历史路由模式输入n回车？
选择CSS预处理器(默认情况下支持post CSS、Autoprefix和CSS模块)选择预处理器模式。我经常选择萨斯/SCSS(带node-sass)
选择一个linter/formatter配置：(使用箭头键):通常，第一个仅带有错误预防的ESLint是语法检测规范的缺省值，但是可以使用ts来选择TSLint。
选择附加lint功能：(按下以选择、切换全部、反转选择)选择保存时检查/提交时检查。在常规开发期间选择第一次检查保存。
你更喜欢把Babel，PostCSS，ESLint等的配置放在哪里？(使用箭头键)选择配置信息的存储位置。通常，默认情况下，将它单独存储或合并到包中是首选。json插件配置单独存储在一个文件中。
将此存储为未来项目的预置？(y/N)是否将其保存为预设，这样下次创建项目时就不必重新选择并输入N和回车。
以上选项完成后，项目就构建成功了。项目目录如下：
vue.config.js文件需要自己创建，放在项目的根目录下。
关于在vue中使用typescript的配置步骤，本文到此为止。更多相关的vue typescript配置内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。