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

前端项目初始化

​​​​​​

目录

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/

相关文章:

前端项目初始化

​​​​​​ 目录 1. 安装 nvm 2. 配置 nvm 并切换到 Node.js 16.15.0 3. 安装 LightProxy 代理 4. GIT安装 1. 配置用户名和邮箱&#xff08;这些信息将用于您在提交代码时的标识&#xff09;&#xff1a; 2. 生成SSH密钥&#xff08;用于将本地代码仓库与远程存储库连…...

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

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

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

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

spring获取注册的bean并注册到自定义工厂中管理

背景 在开发的时候&#xff0c;对于同一个对象的按照某个字段的不同有很多的处理方式。想着开发一个类似于工厂模式&#xff0c;由上层工厂统一分配。 由于是基于springboot开发&#xff0c;所以有很多自动注入的对象&#xff0c;如果由工厂统一创建new对象的方式&#xff0c;那…...

IDEA 中 Maven Dependencies 出现红色波浪线的原因及解决方法

在使用 IntelliJ IDEA 开发 Java 项目时&#xff0c;尤其是基于 Maven 的项目&#xff0c;开发者可能会遇到 Maven Dependencies 中出现红色波浪线的问题。这种现象通常表示项目依赖未能正确解析或下载&#xff0c;导致代码提示错误、编译失败等问题。本文将详细分析该问题的常…...

springMVC-10验证及国际化

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

使用Python和TensorFlow实现图像分类

最近研学过程中发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。下面开始对正文内容的…...

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;使用…...

Flask 核心概念速览:路由、请求、响应与蓝图

一、路由参数与请求方法 Flask 路由允许定义多种参数类型,并通过 methods 属性限制请求方法。 1. 路由参数类型: 除了默认的 string,Flask 还支持: int: 匹配整数,自动转换为 Python int 类型。非数字输入会返回 404。 float: 匹配浮点数,自动转换为 Python float 类型…...

Spring Boot消息系统开发指南

消息系统基础概念 消息系统作为分布式架构的核心组件&#xff0c;实现了不同系统模块间的高效通信机制。其应用场景从即时通讯软件延伸至企业级应用集成&#xff0c;形成了现代软件架构中不可或缺的基础设施。 通信模式本质特征 同步通信要求收发双方必须同时在线交互&#…...

【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】 弹出的【是否添加启动文件到文件夹下】&…...

RNN和CNN使用场景区别

RNN&#xff08;循环神经网络&#xff09;和 CNN&#xff08;卷积神经网络&#xff09;是深度学习中两种核心架构&#xff0c;它们的使用场景主要取决于数据结构和任务需求。以下是两者的关键区别及典型应用场景&#xff1a; 核心差异对比 维度RNN&#xff08;循环神经网络&a…...

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 作为现代前端开发中广泛使用的主流框架之一&…...

基于端到端深度学习模型的语音控制人机交互系统

基于端到端深度学习模型的语音控制人机交互系统 摘要 本文设计并实现了一个基于端到端深度学习模型的人机交互系统,通过语音指令控制其他设备的程序运行,并将程序运行结果通过语音合成方式反馈给用户。系统采用Python语言开发,使用PyTorch框架实现端到端的语音识别(ASR)…...

原生js操作元素类名(classList,classList.add...)

1、classList classList属性是一个只读属性&#xff0c;返回元素的类名&#xff0c;作为一个DOMTokenList集合(用于在元素中添加&#xff0c;移除及切换css类) length:返回类列表中类的数量&#xff0c;该属性是只读的 <style> .lis { width: 200px; …...

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

作者简介 我是摘星&#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初…...

Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解

在现代 Web 应用中&#xff0c;异步处理是实现流畅交互的核心技术。本文基于前几章实现的内容Tailwind CSS 实战&#xff1a;基于 Kooboo 构建 AI 对话框页面&#xff08;七&#xff09;&#xff1a;消息框交互功能添加-CSDN博客&#xff0c;深入解析 AI 对话框页面中异步逻辑的…...