前端项目初始化

​​​​​​

目录

1. 安装 nvm

2. 配置 nvm 并切换到 Node.js 16.15.0

3. 安装 LightProxy 代理

4. GIT安装

1. 配置用户名和邮箱（这些信息将用于您在提交代码时的标识）：

2. 生成SSH密钥（用于将本地代码仓库与远程存储库连接起来）：

5. 项目依赖安装

6.pnpm

使用更短的别名

在 POSIX 系统上添加永久别名

在 Powershell (Windows) 中添加永久别名：

ps：镜像加速

1. 安装 nvm

nvm（Node Version Manager）是一个用于管理多个 Node.js 版本的工具。以下是 nvm 的安装步骤：

Windows

1. 访问 nvm-windows GitHub 仓库。
2. 下载最新版本的安装程序（.zip 文件）。
3. 解压文件并运行 install.cmd。

2. 配置 nvm 并切换到 Node.js 16.15.0

1. 打开终端。
2. 使用 nvm 安装 Node.js 16.15.0：

nvm install 16.15.0

1. 切换到 Node.js 16.15.0：

nvm use 16.15.0

1. 验证安装是否成功：

node -v
npm -v

你应该会看到 v16.15.0 和相应的 npm 版本号。

3. 安装 LightProxy 代理

LightProxy 是一个轻量级的 HTTP/HTTPS 代理工具，适用于前端开发调试。

1. 访问 LightProxy 官网 或 Release 页面。
2. 下载对应操作系统的安装包（Windows 用户下载 .exe 文件，macOS 用户下载 .dmg 文件）。
3. 按照安装向导完成安装。
4. 启动 LightProxy，并配置代理设置

# https://api.cline.xxx.com/api https://test.msig.xxx.com/api

#feature-test

# https://api.cline.xxx.com/api https://feature-test.msig.xxx.com/api

4. GIT安装

一、下载Git安装包

1. 访问Git的官方网站：Git官网下载页面。
2. 根据您的操作系统选择相应的安装包进行下载。

二、安装Git

对于Windows用户：

1. 双击下载好的Git安装包，开始安装过程。
2. 在安装过程中，建议使用默认设置，点击“Next”逐步进行。

• • 您可以选择修改安装路径（非中文且没有空格的路径）。
  • 在配置组件、菜单、文件默认编辑器、分支初始化名称等步骤时，通常可以选择默认选项。
  • 配置SSH可执行文件、数据传输使用的lib库、行尾符号转换格式、Git Bash的终端模拟器等，也建议使用默认设置。

1. 安装完成后，点击“Finish”按钮完成安装。

对于macOS/Linux用户：

1. 根据下载的安装包类型（如 .dmg 文件或 .tar.gz 文件），按照相应的安装步骤进行安装。
2. macOS 用户通常可以直接打开 .dmg 文件，并将Git拖动到“应用程序”文件夹中。
3. Linux 用户可能需要解压 .tar.gz 文件，并按照Git官方文档或社区提供的指南进行安装。

三、验证Git安装是否成功

1. 打开终端（对于Windows用户，可以右键点击任意目录，选择“Git Bash Here”进入Git命令行窗口）。
2. 输入命令：git --version，检查显示的Git版本号是否正确。

四、Git的基本配置

1. 配置用户名和邮箱（这些信息将用于您在提交代码时的标识）：

• • 输入命令：git config --global user.name "Your Name"，将"Your Name"替换为您的用户名。
  • 输入命令：git config --global user.email "yourname@example.com"，将"yourname@example.com"替换为您的电子邮件地址。

2. 生成SSH密钥（用于将本地代码仓库与远程存储库连接起来）：

• • 输入命令：ssh-keygen -t rsa -b 4096 -C "your_email@example.com"，将"your_email@example.com"替换为您的电子邮件地址。
  • 生成成功后，您可以在用户目录下的.ssh文件夹中找到公钥（id_rsa.pub文件）和私钥（id_rsa文件）。
  • 将公钥添加到您的远程存储库（如GitHub、GitLab等）的配置中，以便您可以与之通信。

5. 项目依赖安装

项目使用 Yarn 作为包管理工具。确保你已经安装了 Yarn（如果未安装，可以通过 npm 安装：npm install -g yarn）。

1. 克隆项目仓库（假设你已经有了项目仓库的 URL）：

git clone <项目仓库URL>
cd <项目目录>

1. 使用 Yarn 安装项目依赖：

yarn install

1. 安装完成后，你可以根据项目的 package.json 文件中定义的脚本来启动开发服务器，例如：
2. yarn run start:local

6.pnpm

我们提供了两个 pnpm CLI 包， pnpm 和 @pnpm/exe。

• pnpm 是 pnpm 的普通版本，需要 Node.js 才能运行。
• @pnpm/exe 与 Node.js 一起打包成可执行文件，因此它可以在没有安装 Node.js 的系统上使用。

npm install -g pnpm@latest-10

或者

npm install -g @pnpm/exe@latest-10

使用更短的别名

pnpm 可能较难输入，您也可以使用更短的别名，如 pn 。

在 POSIX 系统上添加永久别名

只需将下面这行代码加入你的 .bashrc，.zshrc，或 config.fish：

alias pn=pnpm

在 Powershell (Windows) 中添加永久别名：

在具有管理员权限的 Powershell 窗口中执行：

notepad $profile.AllUsersAllHosts

在打开的 profile.ps1 文件中，输入：

set-alias -name pn -value pnpm

保存文件并关闭窗口。 你可能需要关闭所有打开的 Powershell 窗口才能使别名生效。

ps：镜像加速

nrm（npm registry manager）是一个用于快速切换npm镜像源的工具。使用nrm可以很方便地将npm的镜像源切换到淘宝镜像源，以下是具体的步骤：

一、安装nrm

在命令行中运行以下命令，全局安装nrm：

npm install -g nrm

二、查看可用的镜像源

安装完成后，可以使用以下命令查看所有可用的镜像源：

nrm ls

这将列出所有nrm支持的镜像源，包括淘宝（taobao）、npm官方（npm）、cnpm等。

三、切换到淘宝镜像源

使用以下命令将npm的镜像源切换到淘宝镜像源：

nrm use taobao

切换成功后，nrm会将npm的当前镜像源设置为淘宝镜像源。

四、验证切换是否成功

可以通过以下命令验证镜像源是否切换成功：

npm config get registry

如果切换成功，该命令将输出淘宝镜像源的URL，即https://registry.npm.taobao.org/。