前端项目环境的搭建

news2024/12/23 9:20:43

一、下载并且安装Node(不安装node,就安装nvm。nvm安装教程):

1.官网下载Node:https://nodejs.org/en/

2.测试nodejs安装是否成功:

windows powerShell中输入node -vnpm -v,看到版本号就代表安装成功。
tips:windows powerShell打开:win+r -> 输入 cmd
在这里插入图片描述


二、安装git:

1、安装git:Git - Downloads

2、判断git是否安装成功:

方法一: 在windows powerShell中输入git -v
在这里插入图片描述
方法二: 在有git仓库的文件夹目录下鼠标右键 --> 显示更多选项 中看到红框的命令
在这里插入图片描述

三、配置ssh:

1、获取ssh:

键入命令:ssh-keygen -t rsa -C "email@email.com"
tips:"email@email.com"是 github/gitlab等需要拉取分支的 账号
一直回车即可。
在这里插入图片描述

2、配置ssh:

① 在C:\Users\Administrator.ssh下产生两个文件:id_rsaid_rsa.pub
② 用记事本打开id_rsa.pub文件,复制内容

③ 在github.com(或者需要拉取文件的网站)上到ssh密钥管理页面,添加新公钥,取个名字,内容粘贴刚才复制的内容。

在这里插入图片描述

四、拉取代码:

1、在 windows powerShell中拉取远程的代码:git clone master ssh或者https链接

在这里插入图片描述

2、进入到目录中:cd 文件名称

3、新建分支:git checkout -b 分支名称

4、将本次分支的内容放在远程分支上:

git add . git commit -m '推送的注释' git push —set-upstream origin 分支名称

5、项目运行或者安装依赖:npm i 或者使用cnpm或者yarn

① 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
② 解决 cnpm 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本:

以管理员身份运行power shell
输入set-ExecutionPolicy RemoteSigned,然后输入回车,问题解决

五、编辑器配置(我使用的是vscode):

1、插件安装:

① 主题:Brackets Light Pro -》 https://github.com/EryouHao/brackets-light-pro
② 汉化:Chinese (Simplified) Language Pack for Visual Studio Code
③ 颜色高亮和图片预览:Color HighlightImage previewopen in browser
④ 编译:Debugger for Chormeopen in browserLive Server (Five Server)
⑤ Html+Css:Easy LESSEasy Sasslanguage-stylusBeautify css/sass/scss/lessHighlight Matching TagHTML CSS Support
⑥ Git:GitLens — Git superchargedGit History
⑦ JS:JavaScript(ES6) code snippetsJavaScript Snippet Pack
⑧ 文件Icon:VSCode Great IconsMaterial Icon Theme
⑨ 代码行样式:indent-rainbow
⑩Vue:VeturVue 3 Snippets
⑪引入包大小: Import Cost
⑫代码自动补全:Auto Rename TagAuto Close Tag

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

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

相关文章

WordPress批量上传文章和自动发布文章的方法

专业介绍:WordPress批量上传文章技术解析 在现代数字时代,内容创作是网络存在的驱动力之一。对于博客作者、新闻编辑和内容管理员而言,高效地批量上传文章至WordPress平台是提高工作效率的一个关键方面。WordPress作为最受欢迎的内容管理系统…

福德植保无人机:农业科技的未来已来

一、引言 随着科技的不断进步,无人机技术已经深入到各个领域。而在农业领域,福德植保无人机更是引领了科技潮流,为农业生产带来了革命性的改变。今天,让我们一起来了解福德植保无人机的魅力所在。 二、福德植保无人机的优势 高效作…

无人机助力电力设备螺母缺销智能检测识别,python基于YOLOv7开发构建电力设备螺母缺销高分辨率图像小目标检测系统

传统作业场景下电力设备的运维和维护都是人工来完成的,随着现代技术科技手段的不断发展,基于无人机航拍飞行的自动智能化电力设备问题检测成为了一种可行的手段,本文的核心内容就是基于YOLOv7来开发构建电力设备螺母缺销检测识别系统&#xf…

gromacs学习及使用(2)

命令解释参考GROMACS基本教程 整个流程参考分子动力学模拟Gromacs一般使用步骤(空蛋白) 从gromacs 5.0版本开始,所有的工具都是“gmx”的子模块。可以通过下面的命令获得任何一个模块的帮助信息: gmx help (module) 或者 gmx (mo…

人主机辅与机主人辅

人主机辅和机主人辅的时机和地点一般取决于具体的应用场景和技术发展,具体而言: 人主机辅: 在较为复杂和需要专业知识的工作中,人类主持机器辅助的需求较为常见。例如,在医疗领域中,人类专家可能会利用机器…

【2023CANN训练营第二季】——Ascend C算子调用及实验演示

自定义算子调用方式 完成自定义算子的开发部署后,可以通过单算子调用的方式来验证单算子的功能。单算子调用有API执行和模型执行两种方式: 单算子API执行:基于C语言的API执行算子,无需提供单算子描述文件进行离线模型的转换&…

docker buildx跨架构构建笔记(x86_64构建下构建aarch64镜像)

docker buildx跨架构构建(x86_64构建aarch64镜像) 文章目录 docker buildx跨架构构建(x86_64构建aarch64镜像)简介第一步 先交叉编译一个aarch64的HelloWorld程序。准备一个用于跨架构的Dockerfile文件使用docker buildx命令构建aarch64架构的镜像。查看镜像具体详细信息&#…

LeetCode Hot100 438.找到字符串中所有字母异位词

题目: 给定两个字符串 s 和 p,找到 s 中所有 p 的 异位词 的子串,返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串(包括相同的字符串)。 代码: class Solution …

【shell】shell脚本编程作业

1 编写bash脚本,要求用户输入源目录和目标目录(绝对路径),然后列出源目录下所有的文件,并将这些文件拷贝到目标目录,并在文件名后面加上时间戳。(提交源代码和运行截图) if [ -d $1 ] || [ -d…

类和对象——(3)再识对象

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 你说那里有你的梦想,…

国产linux单用户模式破解无密码登陆 (麒麟系统用户登录密码遗忘解决办法)

笔者手里有一批国产linu系统,目前开始用在日常的工作生产环境中,我这个老程序猿勉为其难的充当运维的或网管的角色。 国产linux系统常见的为麒麟Linux,统信UOS等,基本都是基于debian再开发的linux。 问题描述: 因为…

centos7下执行yum命令报错

前言 在Linux系统中,安装nginx时候,需要先安装环境。 Nginx是使用C语言开发,安装nginx需要先从官网上将源码下载,然后编译,编译需要gcc环境,但是在安装gcc环境的时候,执行命令报错。 yum install –y gcc-…

【稳定检索|投稿优惠】2024年生物神经工程与健康大数据国际会议(ICBNHBD 2024)

2024年生物神经工程与健康大数据国际会议(ICBNHBD 2024) 2024 International Conference on Biological Neuroengineering and Health Big Data(ICBNHBD) 一、【会议简介】 2024年生物神经工程与健康大数据国际会议(ICBNHBD 2024),这场科学盛宴,会议在中…

训练自己的个性化Stable diffusion模型,LORA

一、背景 需要训练自己的LORA模型 二、分析 1、有sd-webui有训练插件功能 2、有单独的LORA训练开源web界面 两个开源训练界面 1、秋叶写的SD-Trainer https://github.com/Akegarasu/lora-scripts/ 没成功,主要也是cudnn和nvidia-smi中的CUDA版本不一致退出 2…

操作系统背景知识

一、程序分类 程序按其运行环境分为: 裸机程序:直接运行在对应硬件上的程序 应用程序:只能运行在对应操作系统上的程序 二、计算机系统的层次结构 计算机系统两种层次结构: 2.1 无操作系统的简单的两层结构 2.2 有操作系统的…

SpringBoot中的部分注解

1.SpringBoot/spring SpringBootApplication: 包含Configuration、EnableAutoConfiguration、ComponentScan通常用在主类上; Repository: 用于标注数据访问组件,即DAO组件; Service: 用于标注业务层组件; RestController: 用…

使用ApexSQLLog工具恢复数据库

目录 前言 一、ApexSQLLog是什么? 二、使用步骤 1.连接你要恢复的数据库 2.选择你要恢复的时间点的数据 3.恢复指定操作的数据 4.恢复指定的表 5.输出结果方式 6.输出结果方式 7.生成还原的sql语句 总结 前言 我们在操作数据库的时候可能误操作把数据修…

Ps:用好钢笔工具

使用钢笔工具时,应随时注意鼠标指针的形状。 ◆ ◆ ◆ 基本操作方法 1、绘制闭合路径 路径绘制结束时回到起点即可创建闭合路径。 2、绘制开放路径 想结束绘制时,按住 Ctrl 键点击画布空白处,或者,直接按 Esc 键,即可…

qt-C++笔记之点击按钮弹出文件资源管理器选择文件后把文件路径赋值给一个QString

qt-C笔记之点击按钮弹出文件资源管理器选择文件后把文件路径赋值给一个QString code review! 文章目录 qt-C笔记之点击按钮弹出文件资源管理器选择文件后把文件路径赋值给一个QString1.运行2.main.cpp3.qt_FileDialog.pro4.QFileDialog类详解 1.运行 2.main.cpp 代码 #inclu…

达索系统SOLIDWORKS 2024工程图新功能

工程图概述 设计模型不仅能比绘制直线更快;SOLIDWORKS 从模型中生成工程图,模型的参数和几何关系在工程图中被保留,这样工程图可反映模型的设计意图;模型或工程图中的更改反映在其相关文件中,这样更改起来更容易&…