从安装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://www.rhkb.cn/news/382823.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抖音客户端一面

C | 字节抖音客户端一面 Http握手过程 1. 客户端问候(Client Hello) 客户端向服务器发送一个“问候”消息,其中包含客户端支持的SSL/TLS版本、加密算法、压缩方法以及一个随机数。 version 版本号,https也有版本号哦TLS 1.0、TLS 1.1、TLS 1.2等等 random 随机数…

(11)Python引领金融前沿:投资组合优化实战案例

1. 前言 本篇文章为 Python 对金融的投资组合优化的示例。投资组合优化是从一组可用的投资组合中选择最佳投资组合的过程,目的是最大限度地提高回报和降低风险。 投资组合优化是从一组可用的投资组合中选择最佳投资组合的过程,目的是最大限度地提高回报…

JUnit 单元测试

JUnit 测试是程序员测试,就是白盒测试,可以让程序员知道被测试的软件如何 (How)完成功能和完成什么样(What)的功能。 下载junit-4.12和hamcrest-core-1.3依赖包 相关链接 junit-4.12:Central …

【Qt】窗口

文章目录 QMainWindow菜单栏工具栏状态栏浮动窗口对话框自定义对话框Qt内置对话框QMessageBox QMainWindow Qt中的主窗口以QMainWindow表示,其总体结构如下: 菜单栏 菜单栏MenuBar,可包含多个菜单Menu,每个菜单也可以包含多个菜…

Godot游戏制作 03世界构建1.0版

在game场景,删除StaticBody2D节点,添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块,自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式,TileMap选择绘制,选中图块后在…

Java——————接口(interface) <详解>

1.1 接口的概念 在现实生活中,接口的例子比比皆是,比如:笔记本电脑上的USB接口,电源插座等。 电脑的USB口上,可以插:U盘、鼠标、键盘...所有符合USB协议的设备 电源插座插孔上,可以插&#xff…

若依Vue前后端分离版如何部署(windows)(超详细)

一、项目环境准备 下面是项目所需要准备的环境 Node.js redis 1、Node.js下载 下面进入官网可以下载Node.js — 在任何地方运行 JavaScript (nodejs.org)https://nodejs.org/zh-cn 下载完成安装后,需要配置环境变量,首先复制以下nodejs的安…

springboot系列十一:Thymeleaf

文章目录 官方文档基本介绍Thymeleaf机制说明Thymeleaf语法表达式运算符th属性迭代条件运算使用Thymeleaf th属性需要注意点 Thymeleaf综合案例需求说明思路分析代码实现 作业布置 官方文档 在线文档: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 离线…

css黑色二级下拉导航菜单

黑色二级下拉导航菜单https://www.bootstrapmb.com/item/14816 body { font-family: Arial, sans-serif; margin: 0; padding: 0; }nav { background-color: #000; /* 导航背景色为黑色 */ }.menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }.menu l…

ARP欺骗——华为ensp

首先,搭建好网络拓扑。网络设备包含客户端Client1和服务端Server1,交换机 以及 云。 图中的 Client和Server 配置IP地址,要和 vm8 在相同的网段。故设置客户端ip为192.168.11.10 ,服务端ip为:192.168.11.20&#xff0…

uni-app AppStore Connect上传拒绝汇总

1.Guideline 2.3.3 - Performance - Accurate Metadata 问题是图片不对,最好是自己截图,然后用香蕉云编 上传图片合成图片 2.Guideline 5.1.2 - Legal - Privacy - Data Use and Sharing 解决办法:在uniapp manifest.json找到 APP常用其他…

【Ubuntu】Ubuntu系统镜像

清华镜像源 Index of /ubuntu-releases/ | 清华大学开源软件镜像站 | Tsinghua Open Source MirrorIndex of /ubuntu-releases/ | 清华大学开源软件镜像站,致力于为国内和校内用户提供高质量的开源软件镜像、Linux 镜像源服务,帮助用户更方便地获取开源软…

Llama 3.1要来啦?!测试性能战胜GPT-4o

哎呀,Meta声称将于今晚发布的Llama 3.1,数小时前就在Hugging Face上泄露出来了?泄露的人很有可能是Meta员工? 还是先来看泄露出来的llama3.1吧。新的Llama 3.1模型包括8B、70B、405B三个版本。 而经过网友测试,该base…

Langchain核心模块与实战[8]:RAG检索增强生成[loader机制、文本切割方法、长文本信息处理技巧]

Langchain核心模块与实战[8]:RAG(Retrieval Augmented Generation,检索增强生成) RAG(Retrieval-Augmented Generation)技术是一种结合检索和生成功能的自然语言处理(NLP)技术。该技术通过从大型外部数据库中检索与输入问题相关的信息,来辅助生成模型回答问题。其核心…

gitee的怎么上传项目

前提 1.先下载Git Bash (如果没有下载的宝子们下载连接如下: 链接: link ) 项目上传到Gitee步骤 1.在Gitee上建立远程仓库 2.填写相关信息 3.进入本地你想要上传的文件目录下,右键单击空白处,点击Git Bash Here 4.配置你的用户名和邮箱 git con…

使用Ollama和OpenWebUI,轻松探索Meta Llama3–8B

大家好,2024年4月,Meta公司开源了Llama 3 AI模型,迅速在AI社区引起轰动。紧接着,Ollama工具宣布支持Llama 3,为本地部署大型模型提供了极大的便利。 本文将介绍如何利用Ollama工具,实现Llama 3–8B模型的本…

Android APP CameraX应用(02)预览流程

说明:camera子系统 系列文章针对Android12.0系统,主要针对 camerax API框架进行解读。 1 CameraX简介 1.1 CameraX 预览流程简要解读 CameraX 是 Android 上的一个 Jetpack 支持库,它提供了一套统一的 API 来处理相机功能,无论 …

爬虫学习3:爬虫的深度爬取

爬虫的深度爬取和爬取视频的方式 深度爬取豆瓣读书 import time import fake_useragent import requests from lxml import etree head {"User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 …

双向链表(C语言版)

1. 双向链表的结构 注意:这里的“带头”跟单链表的“头结点”是两个概念,实际上在单链表阶段称呼不太严谨,但是为了更好地理解就直接称为单链表的头结点。带头链表里的头结点,实际为“哨兵位”,哨兵位结点不存储任何有…

MaxSite CMS v180 文件上传漏洞(CVE-2022-25411)

前言 CVE-2022-25411 是一个影响 Maxsite CMS v180 的远程代码执行漏洞。攻击者可以通过上传一个特制的 PHP 文件来利用这个漏洞,从而在受影响的系统上执行任意代码。 漏洞描述 该漏洞存在于 Maxsite CMS v180 的文件上传功能中。漏洞利用主要通过允许上传带有危…