从安装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就可以正常编译项目代码了,如下:

结束。

相关推荐
我是伪码农4 分钟前
Vue 1.28
前端·javascript·vue.js
鹓于9 分钟前
Excel一键生成炫彩二维码
开发语言·前端·javascript
siwangdexie_new9 分钟前
html格式字符串转word文档,前端插件( html-docx-js )遇到兼容问题的解决过程
前端·javascript·html
子春一23 分钟前
Flutter for OpenHarmony:构建一个智能长度单位转换器,深入解析 Flutter 中的多字段联动、输入同步与工程化表单设计
开发语言·javascript·flutter
利刃大大26 分钟前
【Vue】scoped作用 && 父子组件通信 && props && emit
前端·javascript·vue.js
-凌凌漆-34 分钟前
【Vue】Vue3 vite build 之后空白
前端·javascript·vue.js
摘星编程42 分钟前
用React Native开发OpenHarmony应用:useImperativeHandle暴露实例方法
javascript·react native·react.js
qq_336313931 小时前
javaweb-Vue3
前端·javascript·vue.js
Mr Xu_1 小时前
UniApp 实战:深度解析 App 端自动检测与静默更新(含强制更新)
javascript·vue.js·uni-app
南风知我意9571 小时前
【前端面试1】基础JS的面试题
前端·javascript·面试