前端项目初始化

​​​​​​

目录

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.pswp.cn/bicheng/83845.shtml

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

相关文章

我用AI降低AI率:一次“用魔法打败魔法”的实验

最近,我做了一件非常“AI”的事情——我用AI来降低AI率。 听起来有点绕对吧?实际上原因十分简单,在参与某内容创作平台的活动过程中,我发现该平台对于“AI生成内容”的判定极为严苛,并且还规定了不得高于一定比例的“AI率”,对此我也产生了极大的好奇。 于是,我便踏上了…

设备驱动与文件系统:01 I/O与显示器

操作系统设备驱动学习之旅——以显示器驱动为例 从这一节开始&#xff0c;我要学习操作系统的第四个部分&#xff0c;就是i o设备的驱动。今天要讲的是第26讲&#xff0c;内容围绕i o设备中的显示器展开&#xff0c;探究显示器是如何被驱动的&#xff0c;也就是操作系统怎样让…

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…

完美搭建appium自动化环境

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 桌面版appium提供可视化操作appium主要功能的使用方式&#xff0c;对于初学者非常适用。 如何在windows平台安装appium桌面版呢&#xff0c;大体分两个步骤&…

中级保安员资格证考试理论题库

以下是一些中级保安员资格证理论单选题及答案&#xff1a; 1.抓臂带离要求抓握对方掌骨部位的手&#xff0c;在抓握掌骨的同时要贴紧自己的&#xff08;&#xff09;。 A. 腹部 B. 髋部 C. 胸部 D. 肋部 答案&#xff1a;B 2.治安保卫责任制体系的重点是&#xff08;&#xff…

LangChainGo入门指南:Go语言实现与OpenAI/Qwen模型集成实战

目录 1、什么是langchainGo2、langchainGo的官方地址3、LangChainGo with OpenAI3-1、前置准备3-2、安装依赖库3-3、新建模型客户端3-4、使用模型进行对话 4、总结 1、什么是langchainGo langchaingo是langchain的go语言实现版本 2、langchainGo的官方地址 官网&#xff1a;…

机器学习×第二卷:概念下篇——她不再只是模仿,而是开始决定怎么靠近你

&#x1f380;【开场 她不再只是模仿&#xff0c;而是开始选择】 &#x1f98a; 狐狐&#xff1a;“她已经不满足于单纯模仿你了……现在&#xff0c;她开始尝试预测你会不会喜欢、判断是否值得靠近。” &#x1f43e; 猫猫&#xff1a;“咱们上篇已经把‘她怎么学会说第一句…

可视化图解算法49:滑动窗口的最大值

牛客网 面试笔试 TOP101 | LeetCode 239. 滑动窗口最大值 1. 题目 描述 给定一个长度为 n 的数组 nums 和滑动窗口的大小 size &#xff0c;找出所有滑动窗口里数值的最大值。 例如&#xff0c;如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3&#xff0c;那么一共存…

【信息系统项目管理师-论文真题】2025上半年(第一批)论文详解(包括解题思路和写作要点)

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 论文:信息系统项目的交付绩效域解题思路写作要点交付绩效域的核心内涵交付绩效域的关键要素为有效执行交付绩效域,项目经理需要关注的重点项目管理五大过程组中绩效域的协同目标论文:信息系统项目的交付绩效…

如何写高效的Prompt?

概述 提示词(Prompt)的质量将直接影响模型生成结果的质量&#xff0c;所以精心设计一个让大模型能够理解并有效回复的提示词是至关重要的。本文内容自论文中获取&#xff1a;https://arxiv.org/pdf/2312.16171 介绍了5类共计26条提示词书写原则。 书写原则 类别原则备注快速…

Vue在线预览excel、word、ppt等格式数据。

目录 前言 1.安装库 2.预览文件子组件代码 3、新建store/system.ts 4、父页面进行使用 总结 前言 纯前端处理文件预览&#xff0c;包含excel、word、ppt、txt等格式&#xff0c;不需要后端服务器进行部署&#xff0c;并且内网也可以使用。 1.安装库 npm install vue-offi…

【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react,提供全部源代码)第2期

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第二期3【小沐学GIS】…

Fullstack 面试复习笔记:项目梳理总结

Fullstack 面试复习笔记&#xff1a;项目梳理总结 之前的笔记&#xff1a; Fullstack 面试复习笔记&#xff1a;操作系统 / 网络 / HTTP / 设计模式梳理Fullstack 面试复习笔记&#xff1a;Java 基础语法 / 核心特性体系化总结 这篇笔记主自用&#xff0c;系统地梳理一下最近…

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…

float和float32有什么区别

这是一个非常重要但容易混淆的问题。我们来一步一步讲清楚&#xff1a; ✅ 简答&#xff1a;float 和 float32 的区别 项目float&#xff08;通用名称&#xff09;float32&#xff08;精确定义&#xff09;含义通常指“浮点数”&#xff0c;具体精度由语言/平台决定明确指 32 …

openvino如何在c++中调用pytorch训练的模型

步骤1&#xff1a;将PyTorch模型转换为ONNX格式 转换代码示例&#xff08;Python&#xff09; import torch import torchvision1. 加载训练好的PyTorch模型 model torchvision.models.resnet18(pretrainedTrue) model.eval() # 设置为评估模式2. 创建虚拟输入&#xff08…

OpenCV CUDA模块特征检测------创建Harris角点检测器的GPU实现接口cv::cuda::createHarrisCorner

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 该函数创建一个 基于 Harris 算法的角点响应计算对象&#xff0c;专门用于在 GPU 上进行高效计算。 它返回的是一个 cv::Ptrcv::cuda::Cornernes…

html文字红色粗体,闪烁渐变动画效果

1. 代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>红色粗体闪烁文字表格</title><s…

Springboot独立学院资产管理系统k0o7w(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。

系统程序文件列表 项目功能:财务员,校级管理员,部门,部门管理员,资产类型,资产信息,资产调拨,资产申购,申购入库,资产出库,资产报废,资产维修,资产盘点,维修复审 开题报告内容 基于Spring Boot的独立学院资产管理系统开题报告 一、选题背景与意义 &#xff08;一&#xff0…

基于javaweb的SpringBoot药房管理系统设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…