Vue 3系列之03——Vue 3使用TypeScript_vue3 typescript-程序员宅基地

技术标签: Vue  vue  vue.js  vue3  vue.js3  

随着应用规模的增长,越来越多的开发者认识到静态语言的好处。静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么Vue 3是用TypeScript编写的。这意味着在Vue应用开发中,使用TypeScript进行开发不需要任何其他工具。TypeScript在Vue 3世界中是一等公民。

有两种方式,可以实现在Vue 3应用中支持使用TypeScript。

1.   基于Vue 3 Preview创建的项目

如果是选择Vue 3模板“Vue 3 Preview”进行项目创建,正如前文hello-world应用那样,则可以采用如下的步骤实现对TypeScript的支持。

在应用的根目录下执行如下命令:

vue add typescript

此时,在命令行会出现提示框,根据提示选择即可。这里都是选“Y”即可,看到如下输出内容,则证明已经完成。

2.   Manually select features(手动选择)方式

如果是采用Manually select features(手动选择)方式创建应用,则直接可以选择TypeScript作为支持选项。具体步骤如下。

选择“TypeScript”,而后回车。

选择“3.x (Preview)”,而后回车。

 

3.   TypeScript应用的差异

相比于JavaScript的应用而言,TypeScript的应用的目录结构如下。

 

l  多了TypeScript语言的配置文件tsconfig.json

l  package.json和package-lock.json中多了对TypeScript等依赖的描述

l  main.js改为了main.ts

l  多了shims-vue.d.ts文件

l  所有在Vue组件中使用JavaScript的地方,都改为了TypeScript

参考引用

  1. 本系列归档至《跟老卫学Vue.js开发》:GitHub - waylau/vuejs-enterprise-application-development: Vue.js Enterprise Application Development. 《跟老卫学Vue.js开发》/《Vue.js 3企业级应用开发实战》源码
  2. 参考书籍《Vue.js 3企业级应用开发实战》:《Vue.js 3企业级应用开发实战(双色版)(博文视点出品)》(柳伟卫)【摘要 书评 试读】- 京东图书
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/kkkloveyou/article/details/123743445

智能推荐

android不让程序显示在最近程序列表中_android如何让拥有system权限的launch不让出现在最近任务里-程序员宅基地

文章浏览阅读6.8k次。Android:excludeFromRecents属性用于控制程序在不在recent列表中显示。true时不显示;false显示,其中false为默认值。运行如下activity后,不会显示在recent列表中。程序正在运行或者退出,在长按HOME键的最近程序列表中不显示该应用以达到隐藏进程的目的。解决办法如下:在主activity处设置属性:android:_android如何让拥有system权限的launch不让出现在最近任务里

常用的公共数据集(一)_webcaricature数据集-程序员宅基地

文章浏览阅读3.2w次,点赞42次,收藏449次。CVonline:图像数据库这是一个整理的图像和视频数据库列表,这些数据库对计算机视觉研究和算法评估很有用。(Google直接翻译的,希望对大家有帮助)原文链接:http://homepages.inf.ed.ac.uk/rbf/CVonline/Imagedbase.htm#action目录一、行动数据库..._webcaricature数据集

html 按钮 click事件无效,HTML / Javascript - 按钮需要两次点击才能执行点击事件(HTML/Javascript - Button takes two clicks to ...-程序员宅基地

文章浏览阅读991次。HTML / Javascript - 按钮需要两次点击才能执行点击事件(HTML/Javascript - Button takes two clicks to execute click event)但是,测试一个简单的切换显示,第一次切换显示需要两次点击。 之后它会在一个中完成。#carousel{border:2px solid blue;width:1280px;height:720px..._html按钮必须双击才有效怎么办

在线绘制网络拓扑图操作方法分享-程序员宅基地

文章浏览阅读2.6k次。  现在绘制流程图都使用在线网站进行绘制了,小编也要跟上潮流的步伐,所以来给大家分享利用在线网站绘制网络拓扑图的操作方法,需要使用的朋友可以进行参考使用。     工具/原料;   迅捷画图在线网站,能上网的电脑并带有浏览器   操作方法介绍:   1.进入迅捷画图官网中,点击首页面中的在线..._在线画网络拓扑图

5gh掌上云计算认证不通过_华为认证HCIE云计算难吗?-程序员宅基地

文章浏览阅读308次。原标题:华为认证HCIE云计算难吗?华为认证HCIE云计算难吗?大家都知道,HCIE是华为认证体系中最高级别的ICT技术认证,含金量非常之高。而在HCIE的认证方向之中,云计算方向近些年非常热门。云计算,大数据,物联网等正在引领和变革这个时代的企业和商业,进而延伸到每一个人的生活之中。而云计算正是这当中不可或缺的一部分,华为HCIE云计算结能够让考取者快速实现技能提升,获得职业发展和晋升,是一个非..._华为认证云计算hcie合并

python3基础知识复习 -- IO编程(文件操作,OS模块,格式化)_python3 io-程序员宅基地

文章浏览阅读345次。python3基础知识复习 -- IO编程(文件操作,OS模块,格式化)_python3 io

随便推点

gff3转mysql_获取基因的所有转录本(不同亚型)的外显子区域-程序员宅基地

文章浏览阅读211次。转载地址:https://www.cnblogs.com/yahengwang/p/9361101.html1. 基因转录本亚型蛋白质亚型或“蛋白质变体“是一组高度相似的蛋白质成员,这些成员来源于单个基因或基因家族,是遗传差异造成的结果。虽然许多具有相同或相似的生物学作用,但一些亚型具有独特的功能。这些高度相似的蛋白质亚型可以由可变剪切(图1)、可变启动子或单基因的其他转录后修饰形成,通常不考虑..._gff文件转为具体的转录本,内含子外显子

Python从入门到入坟(二)jupyter的常用操作_jupyter中的print方法-程序员宅基地

文章浏览阅读705次。前文说了学Python先安装anaconda的环境我们现在来看看安装完之后怎么用我已经迫不及待写代码了洋洋洒洒几千行喂,烙铁,你的口水都流出来了,快醒醒【用力拍不积跬步无以至千里,不积小流无以成江海。对吧 Jupyter notebook的常用操作在弹出的网页(怎么弹出的请看上文)中按照红圈操作: 弹出一个新的页面这样我们就可以开始写点代码了 ..._jupyter中的print方法

IDEA出现Cannot resolve symbol “xxx“(无法解析符号)_cannot resolve symbol 'index-程序员宅基地

文章浏览阅读3.9k次。1、File->Invalidate Caches/Restart,勾选前三项,清除缓存并重启 idea。2、查看项目设置SDK是否正确。解决。_cannot resolve symbol 'index

bzoj 2754 [SCOI2012]喵星球上的点名 (AC自动机+map维护Trie树)_喵星球上的点名 ac自动机+fail树虚树-程序员宅基地

文章浏览阅读184次。题目大意:略由于字符集大,要用map维护Trie树并不能用AC自动机的Trie图优化,不然内存会炸所以我用AC自动机暴跳fail水过的显然根据喵星人建AC自动机是不行的,所以要根据问题建然而这题有一些很艮的地方:1.如果一个喵的名和姓都被点到,那他只被点到了一次2.询问的串可能相同3.如果map中并不包含某个元素,但你强行用数组表示它,那么它会返回0,然后这个元素会..._喵星球上的点名 ac自动机+fail树虚树

Python学习:python time模块之time.mktime()_time.mktime()函数的作用-程序员宅基地

文章浏览阅读1w次,点赞3次,收藏16次。mktime()函数定义mktime()是 localtime() 的反函数。参数是 struct_time 或者完整的 9 元组,它表示 local 的时间,而不是 UTC 。返回一个浮点数,可以与 time() 兼容。如果输入值不能表示为有效时间,则 OverflowError 或 ValueError 将被引发(这取决于Python或底层C库是否捕获到无效值)。它可以生成时间的最早日期取决于平台。mktime()用法代码块import timeprint(time.localtime()_time.mktime()函数的作用

UVAlive6807 Túnel de Rata (最小生成树)-程序员宅基地

文章浏览阅读102次。题意题目链接Sol神仙题Orz我们考虑选的边的补集,可以很惊奇的发现,这个补集中的边恰好是原图中的一颗生成树;并且答案就是所有边权的和减去这个边集中的边的权值;于是我们只需要求最大生成树就好了;#include<bits/stdc++.h>using namespace std;const int MAXN = 2e6 + 10, INF = 1e9 +..._h - t煤nel de rata

推荐文章

热门文章

相关标签