前端项目初始化

news2025/7/23 12:41:38

​​​​​​

目录

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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2402549.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

USB扩展器与USB服务器的2个主要区别

在现代办公和IT环境中&#xff0c;连接和管理USB设备是常见需求。USB扩展器&#xff08;常称USB集线器&#xff09;与USB服务器&#xff08;如朝天椒USB服务器&#xff09;是两类功能定位截然不同的解决方案。前者主要解决物理接口数量不足的“近身”连接扩展问题&#xff0c;而…

第46节:多模态分类(图像+文本)

一、多模态分类概述 多模态分类是指利用来自不同模态(如图像、文本、音频等)的数据进行联合分析和分类的任务。 在当今大数据时代,信息往往以多种形式存在,例如社交媒体上的图片配文字、视频附带字幕、医疗检查中的影像与报告等。单一模态的数据往往只能提供有限的信息,…

springMVC-10验证及国际化

验证 概述 ● 概述 1. 对输入的数据(比如表单数据)&#xff0c;进行必要的验证&#xff0c;并给出相应的提示信息。 2. 对于验证表单数据&#xff0c;springMVC提供了很多实用的注解, 这些注解由JSR303 验证框架提供. ●JSR 303 验证框架 1. JSR 303 的含义 JSR&#xff0…

LRU 和 DiskLRU实现相册缓存器

我是写Linux后端的&#xff08;golang、c、py&#xff09;&#xff0c;后端缓存算法通常是指的是内存里面的lru、或diskqueue&#xff0c;都是独立使用。 很少有用内存lru与disklru结合的场景需求。近段时间研究android开发&#xff0c;里面有一些设计思想值得后端学习。 写这…

figma MCP + cursor如何将设计稿生成前端页面

一、准备工作 figma MCP需要通过figma key来获取设计稿权限&#xff0c;key的生成步骤如下 1. 打开figma网页版/APP&#xff0c;进入账户设定 2. 点击生成token 3. 填写内容生成token(一定要确认复制了&#xff0c;不然关闭弹窗后就不会显示了) 二、配置MCP 4. 进入到cursor…

如何理解OSI七层模型和TCP/IP四层模型?HTTP作为如何保存用户状态?多服务器节点下 Session方案怎么做

本篇概览&#xff1a; OSI 七层模型是什么&#xff1f;每一层的作用是什么&#xff1f;TCP/IP四层模型和OSI七层模型的区别是什么&#xff1f; HTTP 本身是无状态协议&#xff0c;HTTP如何保存用户状态? 能不能具体说一下Cookie的工作原理、生命周期、作用域&#xff1f;使用…

【Elasticsearch】映射:Nested 类型

映射&#xff1a;Nested 类型 1.为什么需要 Nested 类型2.如何定义 Nested 类型3.相关操作3.1 索引包含 Nested 数据的文档3.2 查询 Nested 数据3.3 聚合 Nested 数据3.4 排序 Nested 数据3.5 更新 Nested 文档中的特定元素 4.Nested 类型的高级操作4.1 内嵌 inner hits4.2 多级…

Vue3 + UniApp 蓝牙连接与数据发送(稳定版)

本教程适用于使用 uni-app Vue3 (script setup) 开发的跨平台 App&#xff08;支持微信小程序、H5、Android/iOS 等&#xff09; &#x1f3af; 功能目标 ✅ 获取蓝牙权限✅ 扫描周围蓝牙设备✅ 连接指定蓝牙设备✅ 获取服务和特征值✅ 向设备发送数据包&#xff08;ArrayBu…

三种读写传统xls格式文件开源库libxls、xlslib、BasicExcel的比较

最近准备读写传统xls格式文件&#xff0c;而不是较新的xlsx&#xff0c;询问DeepSeek有哪些开源库&#xff0c;他给出了如下的简介和建议&#xff0c;还给出了相应链接&#xff0c;不过有的链接已失效。最后还不忘提醒&#xff0c;现在该用xlsx格式了。 以下是几个可以处理传统…

Nature子刊同款的宏基因组免疫球蛋白测序怎么做?

免疫球蛋白A&#xff08;IgA&#xff09;是人体肠道黏膜分泌的主要抗体&#xff0c;它在塑造肠道微生物群落和维持肠道稳态中起着关键作用&#xff0c;有研究发现缺乏IgA的患者更容易患自身免疫性疾病和感染性疾病。 目前用于研究IgA结合的主要技术是IgA-SEQ&#xff0c;结合了…

2025年牛客网秋招/社招高质量 Java 面试八股文整理

Java 面试 不论是校招还是社招都避免不了各种面试。笔试&#xff0c;如何去准备这些东西就显得格外重要。不论是笔试还是面试都是有章可循的。关键在于理解企业的需求&#xff0c;明确自己的定位&#xff0c;以及掌握一定的应试技巧。 笔试部分&#xff0c;通常是对基础知识、…

ADI的BF609双核DSP怎么做开发,我来说一说(五)LAN口测试

作者的话 ADI的双核DSP&#xff0c;第二颗是Blackfin系列的BF609&#xff0c;这颗DSP我用了很久&#xff0c;比较熟悉&#xff0c;且写过一些给新手的教程。 硬件准备 ADSP-BF609-CORE&#xff1a;ADI BF609开发板 产品链接&#xff1a;https://item.taobao.com/item.htm?…

行业赋能篇-2-能源行业安全运维升级

在能源行业&#xff0c;尤其是风电领域&#xff0c;运维作业往往面临“三高”挑战——高风险环境、高异构数据量&#xff09;、高合规要求。以海上风电场为例&#xff0c;传统运维依赖卫星电话沟通&#xff0c;数据记录碎片化&#xff0c;故障因信息传递延迟导致损失扩大。如何…

飞云智能波段主图+多空短线决策副图指标,组合操盘技术图文解说

如上图&#xff0c;组合指标&#xff1a;主图-飞云智能波段&#xff0c;红线上红色K线标记&#xff0c;波段做多.副图指标-多空短线决策&#xff0c;跟踪做短线&#xff0c;红柱做多&#xff0c;绿柱短线卖出或做空。 实战操作中&#xff0c;我们在主图红色线支撑上红色K线出现…

【51单片机】1. 基础点灯大师

1. 新建一个项目集一些基本操作 打开Keli软件&#xff0c;然后&#xff1a; 【Project】→【new μVision Project】→选择项目保存位置 建议文件名选一些通用的名字&#xff0c;如【Project】 左下角选择【Atmel】的【AT89C52】 弹出的【是否添加启动文件到文件夹下】&…

PC端直接打印功能(包括两张图片合并功能)

一、 效果图 二、demo代码 <template><div class"box"><divref"printContent"class"print-content"><div class"print-title">打印图片</div><imgclass"preview-image":src"merged…

Vue前端篇——项目目录结构介绍

&#x1f4d8; 前言 在正式开始学习 Vue 3 开发之前&#xff0c;了解并熟悉其项目目录结构是非常关键的第一步。一个清晰、规范的目录结构不仅有助于开发者高效地组织代码&#xff0c;还能显著提升项目的可读性和可维护性。 Vue 3 作为现代前端开发中广泛使用的主流框架之一&…

抽象工厂模式深度解析:从原理到与应用实战

作者简介 我是摘星&#xff0c;一名全栈开发者&#xff0c;专注 Java后端开发、AI工程化 与 云计算架构 领域&#xff0c;擅长Python技术栈。热衷于探索前沿技术&#xff0c;包括大模型应用、云原生解决方案及自动化工具开发。日常深耕技术实践&#xff0c;乐于分享实战经验与…

35.成功解决编写关于“江协科技”编写技巧第二期标志位积累的问题

江科大学长又发布了第二期的编写技巧&#xff01; 大家可以看看&#xff1a;https://space.bilibili.com/383400717 最后面给了一个未完成的任务&#xff1a; 这里我已经把这个问题给解决了&#xff01; 总代码放在资源里面&#xff0c;key.c放在文章最后面&#xff01;同时感…

Linux常用命令学习手册

Linux常用命令学习手册https://download.csdn.net/download/2401_87690752/90953550 《Linux常用命令学习手册》提供了一份实用的Linux操作指南&#xff0c;主要收录了系统管理和文件操作等基础命令。内容涵盖了目录切换、文件查看、权限设置等核心功能&#xff0c;适合Linux初…