当前位置: 首页 > news >正文

从安装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就可以正常编译项目代码了,如下:
在这里插入图片描述
结束。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • k8s集群 安装配置 Prometheus+grafana
  • 【大数据面试题】38 说说 Hive 怎么行转列
  • 「网络通信」HTTP 协议
  • 服务器系统盘存储不够,添加数据盘并挂载(阿里云)
  • 各模型文件后缀及其相关框架和用途的简要介绍
  • SCI一区级 | Matlab实现SSA-CNN-GRU-Multihead-Attention多变量时间序列预测
  • 学懂C语言(十): C语言位运算符(按位与、按位或、左移、右移、异或、取反)的计算过程和底层原理
  • vue使用audio 音频实现播放与关闭(可用于收到消息给提示音效)
  • 4.基础知识-数据库技术基础
  • 河南萌新联赛2024第(一)场:河南农业大学
  • kafka---消息日志详解
  • 【LeetCode】day17:654 - 最大二叉树, 617 - 合并二叉树, 700 - 二叉树搜索树中的搜索, 98 - 验证二叉搜索树
  • PyTorch Tabular:高效优化结构化数据处理的强大工具
  • 达梦数据库系列—29. DTS迁移ORACLE到DM
  • C++多线程编程中的锁详解
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • ComponentOne 2017 V2版本正式发布
  • Docker: 容器互访的三种方式
  • eclipse(luna)创建web工程
  • Git同步原始仓库到Fork仓库中
  • Intervention/image 图片处理扩展包的安装和使用
  • LeetCode29.两数相除 JavaScript
  • leetcode386. Lexicographical Numbers
  • Markdown 语法简单说明
  • mysql_config not found
  • Next.js之基础概念(二)
  • PAT A1092
  • Promise面试题,控制异步流程
  • spring boot 整合mybatis 无法输出sql的问题
  • vue-router的history模式发布配置
  • Vue实战(四)登录/注册页的实现
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • 安装python包到指定虚拟环境
  • 搭建gitbook 和 访问权限认证
  • 翻译:Hystrix - How To Use
  • 计算机在识别图像时“看到”了什么?
  • 记一次删除Git记录中的大文件的过程
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 一个项目push到多个远程Git仓库
  • #1015 : KMP算法
  • (4)STL算法之比较
  • (Java入门)抽象类,接口,内部类
  • (创新)基于VMD-CNN-BiLSTM的电力负荷预测—代码+数据
  • (二十三)Flask之高频面试点
  • (四)模仿学习-完成后台管理页面查询
  • (万字长文)Spring的核心知识尽揽其中
  • (一)Neo4j下载安装以及初次使用
  • (转)VC++中ondraw在什么时候调用的
  • **PHP二维数组遍历时同时赋值
  • *上位机的定义
  • .NET 8 跨平台高性能边缘采集网关
  • .NET Core 通过 Ef Core 操作 Mysql
  • .net on S60 ---- Net60 1.1发布 支持VS2008以及新的特性