Node.js初探-前端环境搭建-typeScript-vscode

Node.js安装及配置

1. 安装Node.js

• 直接从官网下载对应版本。
• 安装包下载后，运行安装程序。
• 一直点击下一步，直至安装完成。

2. 配置Node.js

• 打开终端或命令行。
• 输入node -v，检查是否已正确安装Node.js。
• 输入npm -v，检查是否已正确安装npm。
• 如果以上命令均能正常执行，则证明Node.js已正确安装。

vscode及插件配置

1. 安装vscode

• 从官网下载对应版本。
• 安装包下载后，运行安装程序。
• 一直点击下一步，直至安装完成。

2. 插件配置

• 打开vscode。
• 在扩展市场中搜索并安装以下插件：
  • ESLint
  • Prettier
  • Live Server
  • Debugger for Chrome

TypeScript安装

1. 安装TypeScript

• 打开终端或命令行。
• 输入npm install -g typescript，安装TypeScript。
• 输入tsc -v，检查是否已正确安装TypeScript。
• 如果以上命令均能正常执行，则证明TypeScript已正确安装。

2. 配置TypeScript

• 在项目根目录下创建tsconfig.json文件。
• 在tsconfig.json文件中添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true
  }
}

git安装

1. 安装git

• 从官网下载对应版本。
• 安装包下载后，运行安装程序。
• 一直点击下一步，直至安装完成。

2. 配置git

• 打开终端或命令行。
• 输入git config --global user.name "your_name"，设置用户名。
• 输入git config --global user.email "your_email"，设置邮箱。

使用Node.js创建项目

1. 创建项目目录

• 打开终端或命令行。
• 创建一个新的项目目录，例如my-project。

2. 进入项目目录

• 输入cd my-project，进入项目目录。

3. 初始化项目

• 输入npm init -y，初始化项目。

4. 安装依赖

• 输入npm install express，安装Express框架。
• 输入npm install body-parser，安装body-parser模块。

5. 创建服务器

• 在项目目录下创建一个名为server.js的文件。
• 在server.js文件中添加以下内容：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

6. 启动服务器

• 在终端或命令行中，输入node server.js，启动服务器。
• 在浏览器中访问localhost:3000，查看输出结果。

使用TypeScript创建项目

1. 创建项目目录

• 打开终端或命令行。
• 创建一个新的项目目录，例如my-typescript-project。

2. 进入项目目录

• 输入cd my-typescript-project，进入项目目录。

3. 初始化项目

• 输入npm init -y，初始化项目。

4. 安装依赖

• 输入npm install typescript，安装TypeScript。
• 输入npm install @types/express，安装Express的类型定义文件。
• 输入npm install @types/body-parser，安装body-parser的类型定义文件。

5. 创建服务器

• 在项目目录下创建一个名为server.ts的文件。
• 在server.ts文件中添加以下内容：

import express from 'express';
import bodyParser from 'body-parser';

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

6. 编译TypeScript

• 在终端或命令行中，输入tsc，编译TypeScript文件。

7. 启动服务器

• 在终端或命令行中，输入node server.js，启动服务器。
• 在浏览器中访问localhost:3000，查看输出结果。

使用git管理项目

1. 初始化git仓库

• 在终端或命令行中，输入git init，初始化git仓库。

2. 添加文件到暂存区

• 输入git add .，将所有文件添加到暂存区。

3. 提交文件到本地仓库

• 输入git commit -m "Initial commit"，提交文件到本地仓库。

4. 创建远程仓库

• 在GitHub或其他代码托管平台上创建一个远程仓库。

5. 将本地仓库与远程仓库关联

• 输入git remote add origin <remote_repository_url>，将本地仓库与远程仓库关联。

6. 将本地仓库推送到远程仓库

• 输入git push -u origin master，将本地仓库推送到远程仓库。

总结

本文介绍了如何使用Visual Studio Code (vscode)、Node.js、git和TypeScript进行前端环境搭建。通过对这些工具的使用，前端工程师可以更加高效地进行开发工作。