从安装Node到TypeScript到VsCode的配置教程

从安装Node到TypeScript到VsCode的配置教程


1.下载Node安装包, 链接
在这里插入图片描述
2.双击安装包,选择安装路径,如下:
在这里插入图片描述
3.一直点击下一步,直至安装结束即可:
在这里插入图片描述
这个时候,node会默认配置好环境变量,并且可以在命令行中检查安装的版本以及npm的版本,如下图:
在这里插入图片描述
在这里插入图片描述
4.下载安装VsCode, 链接,下载后安装,一路默认选项即可,如下图:
在这里插入图片描述
在这里插入图片描述

5.安装VsCode中文简体语言包,如下:
在这里插入图片描述
安装完成后,重启VsCode后就可以将语言切换成中文了。
在这里插入图片描述
6.安装TypeScript,打开VsCode,打开终端,如下:
首先给npm设置资源安装库的地址,如下:
地址一:https://registry.npm.taobao.org/typescript
地址二:https://registry.npmmirror.com
如果使用该地址报了以下错误:

npm error request to https://registry.npm.taobao.org/typescript failed, reason: certificate has expired

则需要切换别的库地址,命令如下:

设置:npm config set registry https://registry.npmmirror.com
查看:npm config get registry

安装TypeScript,命令如下:

npm install typescript -g

安装完成后,查看ts安装版本报错,如下:
在这里插入图片描述
处理起来也很简单,找到windows power shell,以管理员身份打开,输入以下命令:

set-ExecutionPolicy Remotesigned

如下图:
在这里插入图片描述
在这里插入图片描述
测试一下,创建一个HelloWord.ts,代码如下:

interface Poit {x: number;y: number;}function tsDemo(data: Poit) {console.log('123');return data.x + data.y;}tsDemo({ x: 1, y: 2 });

此时需要安装 ts-node,命令如下:

npm i -g ts-node
然后在VsCode终端中输入以下命令运行HelloWord.ts,如下:

ts-node HelloWord.ts

输出结果为:123
在这里插入图片描述
插播一下,如果操作了上述还不行的话,那就得去查看一下node的这两个文件夹安装在了哪里,如下:
在这里插入图片描述
找到这个路径,如下:

D:\Program Files\nodejs\node_global
D:\Program Files\nodejs\node_cahce

将以上两个路径配置到环境变量中即可,当然需要给用户级别的和系统级别的Path都要配置,如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.接着给VsCode安装yarn,如下:

npm install -g yarn

安装成功后,在终端编译项目时可能会报错,如下:

yarn serve

在这里插入图片描述
此时可以看出,是webpack没有安装,使用如下命令:

npm install webpack -g
yarn add -D webpack-cli //webpack-cli 脚手架

安装完成后再执行 yarn serve就可以正常编译项目代码了,如下:
在这里插入图片描述
结束。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3250258.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

《基于 Kafka + Quartz 实现时限质控方案》

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…

OpenCv 如何在 Java 中使用

Java 项目引入 OpenCv 环境准备OpenCv介绍下载Maven 安装动态链接库 完成 环境准备 JDK 8 OpenCv 4.0.0 Maven 3.9 Windows 11 OpenCv 介绍 OpenCV(开源计算机视觉库)是一个功能强大的计算机视觉和机器学习库。它提供了广泛的工具和算法,用…

jquery实现文字点选验证码

jquery实现文字点选验证码 git地址:点击获取源码 一、功能说明(文字点选验证码) 词组库内存在大量3~6字随机词组,从词组库内随机找出一组词组,随机展现在显示区点击按钮,弹出验证码区域将词组内的随机数量…

4. docker镜像、Dockerfile

docker镜像、Dockerfile 一、docker镜像1、镜像介绍2、镜像核心技术 二、Dockerfile定制镜像1、Dockerfile使用流程1.1 编写Dockerfile1.2、构建镜像1.3 创建容器测试镜像定制操作 2、Dockerfile常用指令 一、docker镜像 1、镜像介绍 分层的文件系统 优势:节省空间…

vue3前端开发-小兔鲜项目-封装一下产品展示模块组件

vue3前端开发-小兔鲜项目-封装一下产品展示模块组件!因为这种产品展示信息的模块组件,后面我还会在其他的页面内反复使用到,所以,使用模块化开发的思路,把它单独设计成一个组件,这样可以代码复用。以后在其…

一建备考,五步形成闭环学习!

一建备考从7月份到考前是大部分人焦虑的时候,因为基础阶段结束,开始成套做真题了,第一遍做真题很多人分数都不太理想,很多同学直接失去信心,开始emo,这都是只听课不做题的结果。 现在很多同学都是这种情况…

STM32智能家居电力管理系统教程

目录 引言环境准备智能家居电力管理系统基础代码实现:实现智能家居电力管理系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:电力管理与优化问题解决方案与优化收尾与总结 1. 引言 智能家居电…

【单片机毕业设计选题24072】-基于单片机的智能停车场管理系统

系统功能: 1.根据RFID卡卡号判断新老用户,老用户不计费直接放行,新用户放行时显示计费结果 2.显示屏显示车位剩余数量 3.检测车位有车亮红灯,无车亮绿灯,能够实现车位诱导 5.车辆出停车场时,能根据停车时间计算停车…

【香橙派】Orange pi AIpro开发板使用之普通照片转换为卡通

前言 最近有幸收到一份新款 OrangePi AIpro 开发板,之前手里也捣鼓过一些板子,这次尝试从零开始部署一个简单的后端服务。OrangePi AIpro 采用昇腾AI技术路线,具体为4核64位处理器AI处理器,可配16GB内存容量,各种复杂应…

Facebook Dating:社交平台的约会新体验

随着社交媒体的普及和技术的发展,传统的社交方式正在经历革新,尤其是在约会这个领域。Facebook作为全球领先的社交平台,推出了Facebook Dating,旨在为用户提供一个全新的约会体验。本文将探讨Facebook Dating如何重新定义社交平台…

c语言题目之打印单身狗

文章目录 一、题目二、思路三、代码实现 提示:以下是本篇文章正文内容,下面案例可供参考 一、题目 二、思路 第一步 首先这里先了解两个有关于位操作符异或的知识点 ,异或操作符的规则是相同为0,相异为1 。 通过上面我们可以得…

双非一本嵌入式方向怎么学?

双非一本(非“985”和“211”工程重点建设的本科院校)的学生在学习嵌入式方向时,可以通过以下步骤和策略来系统地学习和提升自己。我收集归类了一份嵌入式学习包,对于新手而言简直不要太棒,里面包括了新手各个时期的学…

哈喽GPT-4o,程序员如何通过GPT-4o保护自己的合法权益

目录 一、法律研究Prompt:派遣合同和劳务外包合同有什么区别?详细说一下在被裁员时的区别? 二、法律条文检索Prompt:检索《劳动合同法》,以下情况属于第几条,如果公司进行技能考试,并以技能考试…

嵌入式物联网在医疗行业中的应用——案例分析

作者主页: 知孤云出岫 目录 嵌入式物联网在医疗行业中的应用——案例分析引言1. 智能病房监控1.1 实时患者监控系统 2. 智能医疗设备管理2.1 设备使用跟踪与维护 3. 智能药物管理3.1 药物分配与跟踪 4. 智能远程医疗4.1 远程患者监控与诊断 总结 嵌入式物联网在医疗行业中的应…

Rust Result 与可恢复的错误

Result 与可恢复的错误 大部分错误并没有严重到需要程序完全停止执行。有时,一个函数会因为一个容易理解并做出反应的原因失败。例如,如果因为打开一个并不存在的文件而失败,此时我们可能想要创建这个文件,而不是终止进程。 回忆…

3112. 访问消失节点的最少时间 Medium

给你一个二维数组 edges 表示一个 n 个点的无向图,其中 edges[i] [ui, vi, lengthi] 表示节点 ui 和节点 vi 之间有一条需要 lengthi 单位时间通过的无向边。 同时给你一个数组 disappear ,其中 disappear[i] 表示节点 i 从图中消失的时间点&#xff0…

华清数据结构day3 24-7-18

基于昨天代码增加增删改查功能 zy.h #ifndef ZY_H #define ZY_H #define MAX 100 //最大容量 //定义学生类型 struct Stu {char name[20];int age;double score; }; //定义班级类型 struct Class {struct Stu student[MAX]; //存放学生的容器int size; //实际…

CH552的bootload程序IAP直接对ROM-flash修改数据(未尝试)

手动写bootload程序的可能 1,根据ch552g的使用手册内容查看到 2,在下面的参考文件的IAP文件夹中看到IAP文件 参考 下面程序中并没有跳转到厂家bootload的过程,这是直接通过控制有关的寄存器对FLSH进行直接写入和修改,这样可以认…

格式工厂,将所有的ts文件,合并为mp4

1、下载格式工厂 格式工厂 官方主页 - 免费多功能的多媒体文件转换工具 2、打开软件:视频合并&混流项 3、添加ts文件 4、点击【确定】,回到首页 5、首页中,点击【开始】开始转: 6、完成以后,会播放音乐并且右下…

Mysql中的几种常见日志

引言 本文是对Mysql中几种常见日志及其作用的介绍 一、error log(错误日志) MySQL 中的 error log(错误日志)是一种非常重要的日志类型,它记录了 MySQL 服务器在启动、运行及关闭过程中遇到的所有重要事件、错误信…