Vue 3系列之03——Vue 3使用TypeScript

news/2025/2/14 2:57:56/

随着应用规模的增长,越来越多的开发者认识到静态语言的好处。静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么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企业级应用开发实战(双色版)(博文视点出品)》(柳伟卫)【摘要 书评 试读】- 京东图书

http://www.ppmy.cn/news/501324.html

相关文章

Neo4j使用系列3

Part3 Neo4j安装及简单使用 There are two editions of Neo4j to choose from, the Community Edition and the Enterprise Edition. The Enterprise Edition includes all that Community Edition has to offer, plus extra enterprise requirements such as backups, clus…

python系列教程3

朋友们,如需转载请标明出处:https://blog.csdn.net/jiangjunshow 声明:在人工智能技术教学期间,不少学生向我提一些python相关的问题,所以为了让同学们掌握更多扩展知识更好的理解人工智能技术,我让助理负责…

【立体视觉(四)】之极线校正与双目视觉

【立体视觉(四)】之极线校正与双目视觉 一、极线校正一)Fusiello校正法1. 转换矩阵计算1)计算旋转矩阵 R n R_n Rn​2)计算内参矩阵 K n K_n Kn​3)计算转换矩阵 T T T 2. 核线影像生成 二、双目视觉 此…

LLM探索:GPT类模型的几个常用参数 Top-k, Top-p, Temperature

Top-k抽样模型从最可能的"k"个选项中随机选择一个如果k10,模型将从最可能的10个单词中选择一个Top-p抽样模型从累计概率大于或等于“p”的最小集合中随机选择一个如果p0.9,选择的单词集将是概率累计到0.9的那部分Temperature控制生成文本随机性…

C/C++打印二维数组的几种方法(都进来给我补充!!!)

1、双重for循环法&#xff1a; #include <stdio.h> #include <stdlib.h> int main(){int zippo[4][2] {{2,4},{6,8},{1,3},{5,7}};for(int i 0;i < 4;i){for(int j 0;j < 2;j){printf("%d ",zippo[i][j]);}printf("\n");}system(&qu…

Loki+Grafana(外)采集Kubernetes(K8s)集群(基于containerd)

一、Loki简介 1、简介 Loki Loki是一个开源、分布式的日志聚合系统&#xff0c;由Grafana Labs推出。Loki的设计目标是为了高效地处理大规模的日志数据&#xff0c;并具有良好的可扩展性。Loki的最大优点是它具有低资源占用和高效的查询速度。这是因为Loki不需要在处理日志数据…

微信聊天记录删除掉怎么恢复回来

微信聊天记录在我们的日常生活中扮演着重要的角色&#xff0c;因为我们经常在上面记录和发送私人的讯息。有时候&#xff0c;我们可能意外地将一些重要的聊天记录删除掉。不用担心&#xff0c;这篇文章将会为你解决这个问题&#xff0c;告诉你微信聊天记录删除掉怎么恢复回来。…

uniapp webview H5跳转微信小程序

第一步&#xff1a;manifest.json 第二步&#xff1a;index.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>…