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

前端项目初始化

​​​​​​

目录

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,并配置代理设置

#msig-test

# 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/

相关文章:

  • Web 架构之 CDN 加速原理与落地实践
  • ESP8266(NodeMcu)+GPS模块+TFT屏幕实现GPS码表
  • 32单片机——窗口看门狗
  • 智能终端与边缘计算按章复习
  • Science Robotics:UCLA 贺曦敏团队综述自主软体机器人
  • npm install的原理
  • 【leetcode】3. 无重复字符的最长子串
  • JAVA学习 DAY2 java程序运行、注意事项、转义字符
  • logstash拉取redisStream的流数据,并存储ES
  • Kubernetes弃用Docker:技术演进与生态变革的深度解析
  • 5.2 HarmonyOS NEXT应用性能诊断与优化:工具链、启动速度与功耗管理实战
  • Tika Server:企业级文档内容解析的轻量级服务化方案
  • 发版前后的调试对照实践:用 WebDebugX 与多工具构建上线验证闭环
  • AI大模型学习三十三、HeyGem.ai 服务端(ubuntu)docker 安装 /客户端(win)分离部署
  • CentOS 7 如何安装llvm-project-10.0.0?
  • 使用Python和OpenCV实现图像识别与目标检测
  • 负载均衡LB》》HAproxy
  • 全球长序列高分辨率光合有效辐射(PAR)(1984-2018)
  • 三、元器件的选型
  • 水库大坝安全监测系统是什么?需要用到哪些设备?
  • 建网站 外贸/企业网站建设规划
  • 旅行社网站的建设开题报告/网站可以自己建立吗
  • 北京h5网站建设报价/什么是网络整合营销
  • 创业型企业网站模板/关键词排名零芯互联关键词
  • 手机网站设置在哪里找/seo引擎优化教程
  • wordpress 4.9.4 安装/信息流广告优化