前端开发环境部署问题

news2024/12/28 19:47:07

很多开发者到了一家新公司,公司发了一台新电脑,对环境安装比较困惑。今天带大家还原,拿到公司电脑,如何安装你需要的各种环境。

一、node按装

官网下载地址:

http://nodejs.cn/download/

根据自己需要下载对应的版本,我下载的是windows系统64位的版本。

详情参见链接: node按照流程

二、cnpm

三、yarn

1. yarn的简介:

Yarn是facebook发布的一款取代npm的包管理工具。

2. yarn的特点

  • 速度超快。
  • Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
  • 超级安全。
  • 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。
  • 超级可靠。
  • 使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。

3. yarn的安装:

  • windows系统
npm install -g yarn    或者 cnpm install -g yarn 
  • mac/linux系统
sudo npm install -g yarn    或者sudo cnpm install -g yarn 

备注:

mac电脑需要用管理员权限按照,因为按照过程中需要创建文件目录。非管理员没有权限创建目录。

安装完成后,再输入下面的命令验证是否安装成功

yarn -v

4. yarn的常用命令:

安装包: 

yarn install //安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock 添加包(会更新package.json和yarn.lock):

yarn add [package] // 在当前的项目中添加一个依赖包,会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version] // 安装指定版本,这里指的是主要版本,如果需要精确到小版本,使用-E参数
yarn add [package]@[tag] // 安装某个tag(比如beta,next或者latest)
//不指定依赖类型默认安装到dependencies里,你也可以指定依赖类型:

yarn add --dev/-D // 加到 devDependencies
yarn add --peer/-P // 加到 peerDependencies
yarn add --optional/-O // 加到 optionalDependencies
//默认安装包的主要版本里的最新版本,下面两个命令可以指定版本:

yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版,但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9,但不接受1.3.0

发布包

yarn publish  //移除一个包 
yarn remove <packageName>//移除一个包,会自动更新package.json和yarn.lock

更新一个依赖 

yarn upgrade //用于更新包到基于规范范围的最新版本

运行脚本 

yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本

显示某个包的信息 

yarn info <packageName>  // 可以用来查看某个模块的最新版本信息

缓存 

yarn cache 
yarn cache list // 列出已缓存的每个包 
yarn cache dir // 返回 全局缓存位置 
yarn cache clean // 清除缓存

安装yarn 
npm install -g yarn
安装成功后,查看版本号: 
yarn --version
创建文件夹 yarn 
md yarn
进入yarn文件夹 
cd yarn
初始化项目 
yarn init // 同npm init,执行输入信息后,会生成package.json文件
yarn的配置项: 
yarn config list // 显示所有配置项
yarn config get <key> //显示某配置项
yarn config delete <key> //删除某配置项
yarn config set <key> <value> [-g|--global] //设置配置项

四、npm yarn 区别 yarn.lock文件

比如说你的项目中三个模块依赖有依赖关系,@1.2.1代表这个模块的版本。在你安装A的时候需要安装依赖C和D,很多依赖不会指定版本号,默认会安装最新的版本,这样就会出现问题:比如今天安装模块的时候C和D是某一个版本,而当以后C、D更新的时候,再次安装模块就会安装C和D的最新版本,如果新的版本无法兼容你的项目,你的程序可能就会出BUG,甚至无法运行。这就是npm的弊端,而yarn为了解决这个问题推出了yarn.lock的机制,这就是项目中的yarn.lock文件。注意:这个文件不要手动修改它,当你使用一些操作如yarn add时,yarn会自动更新yarn.lock

五、切换镜像源[nrm]

由于npm原始源在国外,下载速度比较慢,所以最好切换为国内镜像源,这里选择 淘宝镜像源 。

1. 按装nrm

首先我们来安装一下nrmnrm能够管理npm

npm install -g nrm --registry https://registry.npmmirror.com/

安装完nrm后,可以通过下面的命令来查看当前可用源

nrm ls

运行结果:
在这里插入图片描述

2. 设置npm的镜像源

1. 查看npm当前镜像源
npm config get registry

在这里插入图片描述

2. 设置npm使用淘宝镜像源
npm config set registry https://registry.npmmirror.com/

这里的https://registry.npmmirror.com/淘宝镜像源地址 是从上面的nrm ls命令查看当前可用源中将taobao 后面的地址复制得到的,可以自己从当前可用源中切换其他的镜像源。

在这里插入图片描述

3. 设置yarn的镜像源

1. 查看yarn当前镜像源
yarn config get registry
2. 设置yarn使用淘宝镜像源
yarn config set registry https://registry.npmmirror.com/

在这里插入图片描述

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

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

相关文章

深度 | Web 3.0时代去中心化IM 的挑战与思考

前言 Web3.0时代的重要特点&#xff1a; 1、数据主权 用户将拥有自己的数据主权&#xff0c;用户所创造的数字内容&#xff0c;所有权和控制权都归属于用户&#xff0c;用户所创造的价值可以由用户自主支配。对于IM业务&#xff0c;就是用户的好友列表&#xff0c;聊天消息等…

windowXP系统无法正常访问vue3网页

开发完的vue3项目需要在XP系统环境使用 由于在立项时采用了开发成本较低速度较快的vue3技术栈&#xff0c;并没有考虑到工厂的设备仍然在试用二十年前的机器&#xff0c;导致项目上线后有部分人员打开页面展示白屏。 经过排查&#xff0c;发现由于vue3使用ES6的Proxy代理实现响…

Linux-目录结构及文件基本操作

目录1、Linux目录结构1.1 FHS标准1.2 目录路径2、Linux文件的基本操作2.1 新建2.2 复制2.3 删除2.4 移动文件与文件重命名2.5 查看文件2.6 查看文件类型2.7 编辑文件1、Linux目录结构 Linux的目录结构和Windows的目录结构在实现上是完全不同的 Windows以存储介质为主&#xff…

Vue-Cli 脚手架 搭建 Vue项目

本篇目开始进行Vue基于项目中的介绍&#xff0c;Vue-cli 是官方提高用于搭建基于 Vue、Webpack、ES6 项目目的脚手架工具&#xff0c;可以前往在线官网查看&#xff1a;—— 官方文档 | Vue CLI 。 安装npm 1. 检测是否安装了Node.js &#xff0c;未安装请前往下载&#xff1b;…

【内网安全-隧道搭建】内网穿透_Ngrok上线(美版、国版二开)

目录 一、准备 1、意义&#xff1a; 2、项目&#xff1a; 二、内网穿透 1、简介&#xff1a; 三、Ngrok&#xff08;入门上线&#xff09; 1、简述&#xff1a; 2、Ngrok入门上线&#xff08;国版二开&#xff09; 3、相关工具&#xff1a; 2、Ngrok入门上线&#xff…

低代码开发平台|SRM-招投标管理搭建指南

1、简介1.1、案例简介本文将介绍&#xff0c;如何搭建SRM-招投标管理。1.2、应用场景企业根据采购需求创建招投标需求&#xff0c;选择供应商进行邀标&#xff0c;供应商报名再投标&#xff0c;投标结束评标人员对投标项目进行评估。2、设置方法2.1、表单搭建1&#xff09;新建…

Python build Exe 使用PyInstaller创建可执行的Python脚本

在本指南中&#xff0c;您将看到如何使用PyInstaller创建Python脚本的可执行文件? 下面是在Windows中实现这一目标的完整步骤。 使用PyInstaller创建可执行文件的步骤 步骤1:添加Python到Windows路径 首先&#xff0c;您可能想要将Python添加到Windows路径。 将Python添加到…

Spring Boot整合Redis笔记

文章目录前言Java 操作 RedisJedis 操作-测试Jedis 实例-手机验证码Redis与Spring Boot整合整合步骤Redis 的事务操作Redis的事务定义Multi、Exec、discard 基本命令事务冲突的问题为什么要做成事务悲观锁乐观锁WATCH key [key ... ]Redis事务三特性Redis事务秒杀案例解决计数器…

分布式定时任务-XXL-JOB-教程+实战

一.定时任务概述 1.定时任务认识 1.1.什么是定时任务 定时任务是按照指定时间周期运行任务。使用场景为在某个固定时间点执行&#xff0c;或者周期性的去执行某个任务&#xff0c;比如&#xff1a;每天晚上24点做数据汇总&#xff0c;定时发送短信等。 1.2.常见定时任务方案…

docker-compose容器编排部署

docker-compose部署微服务1、Docker-Compose是什么&#xff1f;2、应用场景3、docker-compose部署SpringBoot项目3.1 编写Dockfile3.2 编写docker-compose.yaml3.3 修改工程配置3.4 将相关文件上传到服务器3.5 执行docker-compose up本文是对DockerNginx打包部署前后端分离项目…

E5061B矢量网络分析仪VNA概念

矢量网络分析仪VNA是一种测试仪器&#xff0c;它可以将网络的响应测量成矢量:实参数和虚参数&#xff0c;从而表征其性能。矢量网络分析仪VNA是射频设计实验室和许多制造和服务领域的重要测试仪器。虽然矢量网络分析仪主要侧重于研究和开发&#xff0c;但它也可以为所有类型的R…

2月3日 读书笔记

我们将程序改善一下&#xff0c;让程序在按下一个键后不结束&#xff0c;而是把所按键的编码在画面上显示出来&#xff0c;这样就可以切实完成中断处理程序了。 所谓中断处理&#xff0c;基本上就是打断CPU本来的工作&#xff0c;加塞要求进行处理。而且处理中断期间不再接收别…

创业30载,百亿市值奥瑞金未来可期

1994年&#xff0c;关玉香在海南文昌破土兴建海南奥瑞金包装实业有限公司&#xff08;原名&#xff1a;文昌奥瑞金制罐公司&#xff09;&#xff0c;与儿子周云杰一起带领着16名工人进入了金属包装行业&#xff0c;从0到如今的百亿市值&#xff0c;就此拉开了一路“封神”的序幕…

字符串(一)BF算法与KMP算法

给一个主串s&#xff0c;在给一个子串substr&#xff0c;判断substr是否为s的子串 一、BF 暴力搜索 暴力&#xff0c;依次逐个比较字符&#xff0c;先从主串和模式串的第一个字符开始&#xff0c;如果相等一起比较下一个字符&#xff0c;如果不相等&#xff0c;那么重新回到模…

PTA L1-032 Left-pad(详解)

前言&#xff1a;本期是关于L1-032 Left-pad的详解&#xff0c;内容包括四大模块&#xff1a;题目&#xff0c;代码实现&#xff0c;大致思路&#xff0c;代码解读&#xff0c;今天你c了吗&#xff1f; 题目&#xff1a; 根据新浪微博上的消息&#xff0c;有一位开发者不满NPM…

SpringCloud Alibaba—— 微服务网关GateWay

目录 1、GateWay网关概述 1.1、什么是GateWay&#xff1f; 1.2、为什么要使用微服务网关&#xff1f; 1.3、Zuul与GateWay网关的区别&#xff1f; 2、快速入门 2.1、创建项目 2.2、配置yml文件 2.3、controller层 2.4、启动类 2.5、启动整体项目 2.6、配置全局过滤器…

代码随想录算法训练营第十七天 | 110.平衡二叉树,257. 二叉树的所有路径,404.左叶子之和

一、昨日回顾与补充今天看了Day16讲解的视频&#xff0c;对于求二叉树最大深度、最小深度以及求完全二叉树的节点个数有了新的理解&#xff0c;总结如下&#xff1a;1.深度和高度的区别&#xff08;之前就看看定义忽略了&#xff09;二叉树节点的深度&#xff1a;指从根节点到该…

jvm垃圾收集器有哪些

Serial收集器 Serial收集器是最基本&#xff0c;发展最悠久的收集器&#xff0c;在JDK1.3.1之前是虚拟机新生代垃圾回收的唯一选择。这个收集器是一个单线程的。它的单线程的意义并不仅仅说明它只会使用一个CPU或者一条收集线程去完成收集工作&#xff0c;最重要的是&#xff…

量化选股股票和量化交易的两者有什么区别?

最近a股在频繁波动后终于开始走强。近几个月来&#xff0c;一些净值明显下降的量化产品业绩终于实现了阶段性回升。与此同时&#xff0c;根据金融终端&#xff0c;量化私募管理的规模已经超过1万亿元。面对目前市场上大量超额收益和大幅波动带来的不合理定价带来的收益&#xf…

磨金石教育摄影技能干货分享|春节街拍欣赏:大街上的年味

当然还有很多人依然沉浸在过年的喜庆氛围中&#xff0c;我们一般把除夕到十五这个期间段都归入春节期间。在这个时间段内街道上都是喜庆的氛围热热闹闹&#xff0c;年味十足。过了除夕之后&#xff0c;春节娱乐的主题除了走亲访友&#xff0c;就是出行了。春节小长假&#xff0…