开发知识点-NodeJs-npm/Pnpm/Vite/Yarn包管理器

news2024/11/26 12:02:00

在这里插入图片描述

包管理器

  • 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
  • npm 全局变量
  • pnpm
  • Pnpm介绍
  • Vite
  • Yarn

‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序

yarn

yarn add vue-amap
yarn add vue-amap ant-design-vue

npm 全局变量

在这里插入图片描述

  • 换主机 新环境
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

之前搭建的 环境 太久没用 不正常

  • npm run dev

在这里插入图片描述

  • npm install
    在这里插入图片描述
    在这里插入图片描述
  • npm audit fix --force
    在这里插入图片描述
  • npm cache clean --force
    在这里插入图片描述

node.js

node -v

npm -v

 F:\evir\eNnvironment\node\node_modules\npm

up to date in 4s

84 packages are looking for funding
  run `npm fund` for details
 
刚刚npm install 了一个新的插件之后一般都会报这个提示,并不是报错
npm install --no-fund 
npm fund


npm root -g
npm i jsdom -g

npm list vue

npm uninstall vue-cli -g
npm install -g @vue/cli


node -v
v16.14.0


npm install webpack -g 
cnpm install vue-cli -g 


npm install -g pnpm

Using timeout flag for weak internet connection
npx create-react-app clients -timeout=100000

npm i


npm config ls   # 查看当前 npm 源

npm config set registry https://registry.npmmirror.com
http://registry.npm.taobao.org




npm/pnpm/yarn切换源
国内镜像
提供商	搜索地址	registry地址
淘宝	https://npmmirror.com/	https://registry.npmmirror.com
腾讯云		http://mirrors.cloud.tencent.com/npm/
华为云		https://mirrors.huaweicloud.com/repository/npm
浙江大学		http://mirrors.zju.edu.cn/npm/
南京邮电		https://mirrors.njupt.edu.cn/nexus/repository/npm/
npm
# 查看源
npm get registry
npm config get registry

# 临时修改
npm --registry https://registry.npmmirror.com install any-touch

# 永久修改
npm config set registry https://registry.npmmirror.com

# 还原
npm config set registry https://registry.npmjs.org
NRM
# 安装 nrm
npm install -g nrm

# 列出当前可用的所有镜像源
nrm ls

# 使用淘宝镜像源
nrm use taobao

# 测试访问速度
nrm test taobao


YRM
# 安装 yrm
npm install -g yrm

# 列出当前可用的所有镜像源
yrm ls

# 使用淘宝镜像源
yrm use taobao

# 测试访问速度
yrm test taobao


创建一个vite 项目
第一步
创建命令 （弃用 npm init @vitejs/app <项目名称> 该命令报错）
使用npm

npm init vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

pnpm

Pnpm介绍

快速的，节省磁盘空间的包管理工具

Pnpm安装
npm i -g pnpm 

查看版本
pnpm -v

初始化新项目
pnpm init

添加依赖包
会自动安装最新版本，会覆盖指定版本号
pnpm add [package] 

一次性添加多个包
pnpm add [package] [package] [package]

添加指定版本的包
pnpm add [package]@[version]

安装某个tag（比如beta,next或者latest）
pnpm add [package]@[tag] 

【3】将依赖项添加到不同依赖项类别
不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型分别添加到 devDependencies、peerDependencies 和 optionalDependencies

pnpm add [package] --dev 或 yarn add [package] -D // 加到 devDependencies
pnpm add [package] --peer 或 yarn add [package] -P // 加到 peerDependencies
pnpm add [package] --optional 或 yarn add [package] -O // 加到 optionalDependencies


【4】升级依赖包
pnpm up                //更新所有依赖项
pnpm upgrade [package] // 升级到最新版本
pnpm upgrade [package]@[version] // 升级到指定版本
pnpm upgrade [package]@[tag] // 升级到指定tag


【5】移除依赖包
pnpm remove [package]              // 移除包
pnpm remove 包 --global            //移除全局包


【6】安装package.json里的包依赖，并将包及它的所有依赖项保存进yarn.lock
安装所有依赖
pnpm 或 pnpm i
复制代码
安装一个包的单一版本
pnpm i --flat
复制代码
强制重新下载所有包
pnpm i --force
复制代码
只安装生产环境依赖
pnpm i --production
复制代码
【7】发布包
pnpm publish
复制代码
【8】运行脚本
用来执行在 package.json 中 scripts 属性下定义的脚本

pnpm run 
复制代码
【9】显示某个包的信息
可以用来查看某个模块的最新版本信息

pnpm info [package] 
复制代码
【10】缓存
pnpm cache
pnpm cache list // 列出已缓存的每个包
pnpm cache dir // 返回全局缓存位置
pnpm cache clean // 清除缓存
复制代码
设置存储路径
pnpm config set store-dir /path/to/.pnpm-store
复制代码
Pnpm设置源
查看源
pnpm config get registry 
复制代码
切换淘宝源
pnpm config set registry https://registry.npmmirror.com
复制代码
临时修改
pnpm --registry https://registry.npmmirror.com install any-touch
复制代码
还原
pnpm config set registry https://registry.npmjs.org

# 查看源
pnpm get registry
pnpm config get registry

# 临时修改
pnpm --registry https://registry.npmmirror.com install any-touch

# 永久修改
pnpm config set registry https://registry.npmmirror.com

# 还原
pnpm config set registry https://registry.npmjs.org




将 pnpm-lock.yaml 和 node_modules 这两个文件删除


pnpm init # 初始化package.json
pnpm install vite -D #安装vite


rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install
npm run xxx


Pnpm 的优点
快速: pnpm 比替代方案快 2 倍
高效: Node_modules 中的文件是从一个单一的可内容寻址的存储中链接过来的
支持: monorepospnpm 内置支持了单仓多包
严格: pnpm 创建了一个非平铺的 node_modules，因此代码无法访问任意包


pnpm到底做了什么
1、当使用npm或yarn时，如果你有100个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存100份该相同依赖包的副本。
2、如果是使用pnpm,依赖包将被存放在一个统一的位置，因此：

    如果你对同一依赖包使用相同的版本，那么磁盘上只有这个依赖包的一份文件；
    如果你对同一依赖包需要使用不同的版本，则仅有版本之间不同的文件会被存储起来；
    所有文件都保存在硬盘的统一的位置：
    当安装软件包时，其包含的所有文件都会硬链接到此位置，而不会占用而外的硬盘空间；
    这让你可以在项目之间方便地共享相同版本的依赖包。

四、pnpm创建非平铺的node_modules目录

1、npm和yarn

    当使用npm或yarn安装依赖包时，所以软件包都被提升到node_modules的根目录下；
    其结果是，源码可以访问本不属于当前项目所设定的依赖包。

2、pnpm

    使用pnpm安装依赖包时，只有安装的那个包会在node_modules的根目录下，并且以软链接(符号链接)的方式存在；
    在node_modules的根目录下同时还会有一个.pnpm文件，里面保存的是所有包的硬链接；
    其结果是，源码不可以访问本不属于当前项目所设定的依赖包。

五、npm与pnpm命令对比
npm命令 	pnpm等价命令
npm install 	pnpm install
npm install 包名 	pnpm add 包名
npm uninstall 包名 	pnpm remove 包名
npm run 脚本 	pnpm 脚本
六、pnpm常用命令
pnpm store path  // 获取包仓库地址（pnpm的仓库不能跨磁盘）
C:\Users\amingMM\AppData\Local\pnpm\store\v3



pnpm store prune  // 从store中删除当前未被引用的包来释放store的空间 


pnpm add -g pnpm




.pnpm\@commitlint+cli@13.1.0\node_modules\lodash
lint
load
format 

yargs-parser-21.1.1.tgz

@commitlint+cli@13.1.0


npm install -g typescript
tsc -v
Version 4.9.5

Vite

├── .env                  # 基础环境变量配置文件（优先级最低）
├── .env.development      # 开发环境变量配置文件
├── .env.production       # 生产环境变量配置文件
├── .env.staging          # 预发布环境变量配置文件


web开发前端构建的工具，对比常用的webpack，优势如下：

（1）因为使用原生ESM文件，无需打包，实时编译

（2）不管应用程序大小，模块热加载（HMR）极快

（3）灵活的API

（4）上手简单、开发效率高
 


使用 NPM:

npm init vite@latest
使用 Yarn:

yarn create vite
使用 PNPM:

pnpm create vite


√ Project name: ... godeye
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\amingMM\Desktop\godeye_html\godeye...

Done. Now run:

  cd godeye
  pnpm install
  pnpm run dev
  
 
安装依赖
  


Vite 安装
【Vite 需要 Node.js 版本 >= 12.0.0】【中文官网写12，英文官网写14，去github上看写14】


本地安装 Node
node 下载地址：https://nodejs.org/zh-cn/


where node
D:\nodejs\node.exe

查看 node 所有版本
npm view node versions


n模块是专门用来管理nodejs的版本，安装n模块

npm install -g n
 更新升级 Node 版本

n // 选取已安装的版本 上下键选择并按回车键确认
n help // 帮助
n ls // 列出所有node版本
n stable // 把当前系统的 Node 更新成最新的 “稳定版本”
n lts // 长期支持版
n latest // 最新版
n 16.14.2 // 指定安装版本
n rm 16.14.2 // 指定删除某个版本
n use xx.xx.x a.js // 制定版本来运行脚本 

npm install -g vite   //全局安装
npm install vite -g   //全局安装
npm install vite -D   //局部安装


vite -v
vite/4.0.4 win32-x64 node-v16.14.0


搭建第一个 Vite 项目
使用 NPM:

npm init vite@latest
使用 Yarn:

yarn create vite
使用 PNPM:

pnpm create vite




使用 Vite 创建 Vue3 项目

# npm 6.x
npm init vite@latest my-vue-app --template vue
 
# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue
 
# yarn
yarn create vite my-vue-app --template vue
 
# pnpm
pnpm create vite my-vue-app -- --template vue
注意：
npm 7+ 后面需要多添加的双横杠；
my-vue-app：是项目的名称，可以根据自己的需要修改；
--template vue：表示创建一个vue模板项目；

*、安装依赖【cd my-vue-app】

npm install
*、运行

npm run dev
*、安装路由，使用最新的 Vue Router 版本

npm install vue-router@4
或
npm install vue-router@next --save
*、安装vuex4

npm install vuex@next --save
或
yarn add vuex@next --save
*、安装element-plus依赖

npm install element-plus --save 
--legacy-peer-deps


import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

npm install lodash


npm install --save @vue/reactivity @vue/shared

Yarn

包管理工具 npm和yarn的区别

yarn
# 查看源
yarn config get registry

# 临时修改
yarn add any-touch@latest --registry=https://registry.npmjs.org/

# 永久修改
yarn config set registry https://registry.npmmirror.com/

# 还原
yarn config set registry https://registry.yarnpkg.com

并行安装：yarn安装包会同时执行多个任务，
npm 需等待上一个任务安装完成才能运行下一个任务


离线模式：如果你已经安装过一个包，
用 yarn 再次安装会从缓存中获取，而 npm 会从网络下载


版本锁定：yarn 默认有一个 yarn.lock 文件锁定版本，保证环境统一，
而 npm 默认从网络下载最新的最稳定的，
版本锁定可以解决包之间版本不兼容问题，npm 也可以通过命令实现版本锁定


更简洁的输出：yarn 安装包时输出的信息较少，npm 输出信息冗余



Yarn的优点
安装速度快 (服务器速度快 , 并且是并行下载)
版本锁定，安装版本统一
缓存机制，如果之前已经安装过一个软件包，
用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了


输出简洁并且多注册来源处理。安装包时，直观地打印出必要的信息；
不管包被不同的库间接关联引用多少次，只会从一个注册来源去装，防止出现混乱不一致。


npm 与 yarn 常用命令对比

在这里插入图片描述

命令
安装yarn

sudo -S
npm install -g yarn
卸载yarn

npm uninstall yarn -g
查看yarn配置

yarn config list
查看当前yarn源

yarn config get registry
修改yarn源（下方为淘宝的源）

yarn config set registry https://registry.npm.taobao.org
查看yarn 版本

yarn -v
yarn安装依赖

yarn add 包名          // 局部安装
yarn global add 包名   // 全局安装
yarn 卸载依赖

yarn remove 包名         // 局部卸载ss
yarn global remove 包名  // 全局卸载（如果安装时安到了全局，那么卸载就要对应卸载全局的）
yarn 查看全局安装过的包

yarn global list

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

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

相关文章

掌动智能：云可观测性的主要特点及应用场景

掌动智能：云可观测性的主要特点及应用场景

云全景可观测性安全平台是一个跨架构、跨平台的可观测性方案&#xff0c;实现对云环境下的细粒度数据可视化&#xff0c;满足安全部门对云内部安全领域的多场景诉求&#xff0c;包括敏感数据动态监管、云网攻击回溯分析、攻击横移风险监控、云异常流量分析。本文将介绍掌动智能…
阅读更多...
vue：如何实现通过判断数组中每个对象的其中一个属性，从而更改另一个属性的值

vue：如何实现通过判断数组中每个对象的其中一个属性，从而更改另一个属性的值

1、假设一个box为一个包含多个对象的数组&#xff0c;这个box数组可以在方法中定义也可以在data域中定义 let box [{ id: 1, status: 审批中 },{ id: 2, status: 已通过 },{ id: 3, status: 未通过 } ];2、在methods域中写一个方法遍历这个box数组判断每个对象中的status属性是…
阅读更多...
【原创】java+swing+mysql校园零食商城设计与实现

【原创】java+swing+mysql校园零食商城设计与实现

摘要&#xff1a; 本文探讨了一个校园零食商城的设计与实现&#xff0c;校园零食商城的设计与实现旨在为学生提供一个方便、快捷的在线购买零食的环境&#xff0c;同时提高商家的销售效率和客户满意度。通过不断优化和完善系统&#xff0c;相信可以为校园内的学生和商家带来更…
阅读更多...
接口自动化面试题

接口自动化面试题

1.http请求都包含哪些内容&#xff0c;请求头和请求体有哪些内容 请求行/请求头/请求体/空行 请求行&#xff1a;请求方法字段、URL字段、http协议版本 例如&#xff1a;GET /index.html HTTP/1.1 请求方法&#xff1a;GET、POST、PUT、DELETE、OPTIONS、TRACE、CO…
阅读更多...
【PG】PostgreSQL13主从流复制部署(详细可用)

【PG】PostgreSQL13主从流复制部署(详细可用)

目录 版本 部署主从注意点 1 主库上创建复制用户 2 主库上修改pg_hba.conf文件 3 修改文件后重新加载配置使其生效 4 主库上修改配置文件 5 重启主库pg使参数生效 6 部署从库 7 备份主库数据至从库 停止从库 备份从库的数据库目录 新建数据库数据目录data 创建和…
阅读更多...
干货 | 接口自动化测试分层设计与实践总结

干货 | 接口自动化测试分层设计与实践总结

接口测试三要素&#xff1a; 参数构造 发起请求&#xff0c;获取响应 校验结果 一、原始状态 当我们的用例没有进行分层设计的时候&#xff0c;只能算是一个“苗条式”的脚本。以一个后台创建商品活动的场景为例&#xff0c;大概流程是这样的(默认已经是登录状态下)&#…
阅读更多...
Python--快速入门三

Python--快速入门三

Python--快速入门三 1.Python列表 列表是Python用于储存一系列数据的容器(特点是可以存放不同类型的数据) python_list ["键盘",True,66,88.8] 列表是可变数据类型&#xff0c;可以直接对列表中的元素进行更改而不需要赋值给本身 列表方法&#xff1a; 1.appen…
阅读更多...
纯干货：赝势的选择 | VASP计算入门教程，真的超级有用

纯干货：赝势的选择 | VASP计算入门教程，真的超级有用

VASP软件是基于贋势和平面波基组的第一性原理密度泛函计算程序。VASP使用的是平面波基组&#xff0c;电子与原子核之间的相互作用使用投影缀加波贋势&#xff08;Projector Augmented Wave&#xff0c;PAW&#xff09;方法描述&#xff0c;从而进行量子力学计算。VASP采用PAW贋…
阅读更多...
成绩公布方式，这样操作更方便

成绩公布方式，这样操作更方便

老师们&#xff01;又到了期中&#xff0c;是不是又在为如何安全、高效的公布学生成绩而烦恼呢&#xff1f;别担心&#xff0c;今天我就给大家分享几种超实用的成绩公布方式&#xff0c;不仅减轻了你的工作负担&#xff0c;还能让学生和家长们也方便&#xff01; 1 Excel表格&a…
阅读更多...
【Android Studio】Android Studio修改代码编辑区（工作区）背景色

【Android Studio】Android Studio修改代码编辑区（工作区）背景色

Android Studio 字体大小及背景色的设置 1、 打开File—>Settings 或者 Android Studio—>CtrlAlts 2、 在setting对话框中选中“Editor->Colors&Fonts->Font &#xff0c; 点击Save as,自定义一个主题,选择字体&#xff0c;size和行间距&#xff0c;保存。 3…
阅读更多...
Flink -- 状态与容错

Flink -- 状态与容错

1、Stateful Operations 有状态算子&#xff1a; 有状态计算&#xff0c;使用到前面的数据&#xff0c;常见的有状态的算子&#xff1a;例如sum、reduce&#xff0c;因为它们在计算的时候都是用到了前面的计算的结果 总结来说&#xff0c;有状态计算并不是独立存在的&#xf…
阅读更多...
C++学习---异常处理机制

C++学习---异常处理机制

文章目录 前言abort()函数 and 返回错误码的异常方式C异常处理机制异常的类别what()函数 前言 abort()函数 and 返回错误码的异常方式 在说C异常处理机制之前&#xff0c;了解一下abort()函数和返回错误码的异常处理。 Abort( )函数的原型位于头文件cstdlib&#xff08;或std…
阅读更多...
CSS关于默认宽度

CSS关于默认宽度

所谓的默认宽度&#xff0c;就是不设置width属性时&#xff0c;元素所呈现出来的宽度 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box {/…
阅读更多...
git 生成公钥

git 生成公钥

1、通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519 -C "Gitee SSH Key" 三次回车 2、查看生成的 SSH 公钥和私钥&#xff1a; ls ~/.ssh/ 3、把公钥设置到git id_ed25519.pub 4、测试 ssh -T gitgitee.com 成功&#xff01;&#xff01;&…
阅读更多...
基于减法平均算法的无人机航迹规划-附代码

基于减法平均算法的无人机航迹规划-附代码

基于减法平均算法的无人机航迹规划 文章目录 基于减法平均算法的无人机航迹规划1.减法平均搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用减法平均算法来优化无人机航迹规划。 …
阅读更多...
朋友圈延迟评论，你用过吗？

朋友圈延迟评论，你用过吗？

在社交媒体时代&#xff0c;朋友圈已经成为人们交流和互动的重要平台。然而&#xff0c;在发表评论时&#xff0c;我们往往会被情绪冲昏头脑&#xff0c;或者因为时间紧迫而没有充分思考。这可能会导致一些不恰当的言论&#xff0c;或者错过一些更精准的表达方式。朋友圈延迟评…
阅读更多...
摄像头内参准确性验证方法

摄像头内参准确性验证方法

前言 摄像头内参标定出来后&#xff0c;标定结果是否准确&#xff1f;有些内参准确性的验证方案需要很大的场地&#xff0c;且有很多误差源不好控制&#xff08;特别是对视野比较大的摄像头&#xff09;&#xff0c;惠州市华阳数码特电子有限公司发明了一种占用场地小测试精度…
阅读更多...
uniapp u-tabs表单如何默认选中

uniapp u-tabs表单如何默认选中

首先先了解该组件&#xff1b;该组件&#xff0c;是一个tabs标签组件&#xff0c;在标签多的时候&#xff0c;可以配置为左右滑动&#xff0c;标签少的时候&#xff0c;可以禁止滑动。 该组件的一个特点是配置为滚动模式时&#xff0c;激活的tab会自动移动到组件的中间位置。 …
阅读更多...
【Java初阶习题】 -- 类和对象

【Java初阶习题】 -- 类和对象

目录 1.局部变量必须先初始化才能使用2. this的两种用法3. import语句不能导入一个指定的包4.代码块的执行顺序5.静态变量的调用6 . 现有一个Data类&#xff0c;内部定义了属性x和y&#xff0c;在main方法中实例化了Data类&#xff0c;并计算了data对象中x和y的和。 1.局部变量…
阅读更多...
11月第1周榜单丨飞瓜数据B站UP主排行榜榜单（B站平台）发布！

11月第1周榜单丨飞瓜数据B站UP主排行榜榜单（B站平台）发布！

飞瓜轻数发布2023年10月30日-11月5日飞瓜数据UP主排行榜&#xff08;B站平台&#xff09;&#xff0c;通过充电数、涨粉数、成长指数、带货数据等维度来体现UP主账号成长的情况&#xff0c;为用户提供B站号综合价值的数据参考&#xff0c;根据UP主成长情况用户能够快速找到运营…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023