首页 > 其他分享 >【vue】《 npm、pnpm和cnpm的区别及使用 》

【vue】《 npm、pnpm和cnpm的区别及使用 》

时间:2024-01-16 14:56:14浏览次数:26  
标签:npm vue cnpm 项目 ## 依赖 pnpm

区别

npm

  NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Vue/Node.js的包管理工具,相当于Java中的Maven、Python中的PIP。

  npm是Node.js官方推出的包管理工具,它是JavaScript世界中最流行的包管理工具之一。通过npm,我们可以方便地安装、更新和删除项目的依赖包。npm默认使用的是官方的npm镜像源,但由于国内网络环境的限制,使用npm安装依赖包可能会比较慢。可以通过使用设置镜像源或者使用cnpm,后面会介绍到这点。

pnpm

  PNPM是一个快速、轻量级、模块化、安全、节省磁盘空间、可靠的JavaScript包管理器,它与npm和yarn类似,但具有一些优势。它通过共享依赖项来减少磁盘空间和下载时间。它与npm兼容,并且可以在npm的基础上构建。

  与npm不同的是,pnpm使用了一种称为“符号链接”的机制来共享依赖包。这意味着,当多个项目使用相同的依赖包时,它们实际上共享同一个依赖包的副本,而不是每个项目都拥有自己的副本。这样可以显著减少磁盘空间的占用,并且安装依赖包的速度也会更快。

cnpm

  cnpm是淘宝团队开发的一个针对中国用户的npm镜像源,它是npm的一个定制版本。由于国外的npm源在国内访问速度较慢,所以cnpm镜像源可以提供更快的下载速度。cnpm的使用方式与npm基本相同,只需将`npm`替换为`cnpm`即可。

常用操作

npm

使用npm命令需要先在项目根目录下初始化一个package.json文件

## 创建项目
npm init

## 按照提示输入相关信息,如果是用默认值则直接回车即可。
## package name: 项目名称
## version: 项目版本号
## description: 项目描述
## keywords: {Array}关键词,便于用户搜索到我们的项目
## author 作者
## license: (ISC) 授权license
## 最后会生成package.json文件
## 查看当前 npm 源
npm config get registry

## 设置镜像地址,切换为 taobao 源:
npm config set registry="https://registry.npm.taobao.org"
## 安装依赖包
npm install 依赖包名

## 默认参数:--save 简写 -S 将当前依赖保存在dependencies节点下
## --save-dev 简写 -D 将当前依赖保存在 devDependencies 节点下
## dependencies 字段用于存放项目的运行时依赖包,项目打包时会一并打包进去
## devDependencies 字段用于存放开发时依赖包,如测试框架、构建工具等,项目打包时不会将工具打包进去

## --global 简写 -g 会将指定的依赖安装到全局环境中
## 更新依赖包
npm update 依赖包名

## -g  全局更新依赖
## -S  更新到dependencies节点
## -D  更新到devDependencies节点
## 卸载依赖包
npm uninstall 依赖包名

## -g  全局更新卸载依赖
## -S  卸载dependencies节点下的依赖包
## -D  卸载devDependencies节点下的依赖包
## 查看已安装的依赖项
npm list

## 简写 ls 
## 发布自己编写的库
## 该命令会将当前项目打包成一个.tar.gz文件
npm pack

## 将打包好的文件上传到npm官方仓库中
npm publish

pnpm

## 安装pnpm
npm install -g pnpm

## 其他常用命令同npm一致

cnpm 

## 安装cnpm 
npm install -g cnpm

## 其他常用命令同npm一致

 

标签:npm,vue,cnpm,项目,##,依赖,pnpm
From: https://www.cnblogs.com/-CO-/p/17967650

相关文章

  • 初始化一个vite+vue3的前端项目要做的额外的事儿
    添加.editorconfig文件#http://editorconfig.orgroot=true[*]charset=utf-8indent_style=spaceindent_size=4end_of_line=lfinsert_final_newline=truetrim_trailing_whitespace=true[*.md]insert_final_newline=falsetrim_trailing_whitespace......
  • vue引入图片的几种方式
    vue引入图片的几种方式:https://blog.csdn.net/qq_36571836/article/details/118806421?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-118806421-blog-80015777.235^v40^pc_relevant_3m_sort_dl_base2&spm=1001.2101.3001.4242......
  • vue在idea中的各级目录作用,工作流程
    vue工程目录作用预览:接下来进行我的一些理解记录:1.vue脚手架运行后,app.vue是所有页面的入口,会先进入到app.vue识别到router-linkto“”标签中router路由路径path,并且转到路由的路径下即src/router.2.根据app.vue中的路径对router中不同的path进行匹配,之后会获取到匹配......
  • VUE-组件间通信BUS
    VUE-组件间通信BUS1. 在src 下创建文件夹 eventBus 创建文件bus.jsimportVuefrom'vue';exportdefaultnewVue(); 创建文件busenum.jsletEvs={fun_struct_relation:"fun_struct_relation",//关联工程结构树};exportdefaultEvs;  2. 调......
  • 《vue新建篇》新建项目
    脚手架和webpack的区别"vueinitwebpack"是Vue.js2.x的旧方式,使用webpack模板创建项目。这种方式需要手动配置一些比较复杂的webpack配置,配置大量的选项,但是可以按照个人需求进行灵活的配置。这个命令可以用来创建高度定制化的Vue.js项目。"vuecreate"是Vue.js3.......
  • vue入门页面,搭建localhost官方默认页面
    按照提示操作可以做出下图效果:idea中的vue目录层级为:1.下载node.js(nodes.js是前端的运行环境,类似于后端中的jdk,没有node.js后续操作无法进行,具体流程百度)2.新建文件夹(这个文件夹就是你之后vue的目录)点进去新建的文件夹3.输入cmd回车4.输入命令:npmconfigsetreistryht......
  • 《vue概念篇》vue设计思路
    vue工作原理参考链接:https://www.cnblogs.com/lishanlei/p/8423407.html参考链接:https://www.cnblogs.com/wzfwaf/p/10553160.htmlMV模式之前,我们都是通过原生js操作dom元素,比如:获取内容、增加点击事件等,如果任务量非常大,那么我们的js代码会随着业务的增加变得臃肿,那么多逻辑,......
  • 《vue语法篇》基础语法
    ref和$ref在Vue中,$ref是一个特殊的属性,它允许您引用组件或DOM元素。可以使用$ref属性在组件或元素上绑定一个唯一的标识符,然后在Vue实例中使用$ref来访问该组件或元素。类似于id选择器。例如,假设您有一个组件:点击查看代码<template><div><inputtype="text"ref="myI......
  • Vue实现大文件分片上传,包括断点续传以及上传进度条
    首先解释一下什么是分片上传分片上传就是把一个大的文件分成若干块,一块一块的传输。这样做的好处可以减少重新上传的开销。比如:如果上传的文件是一个很大的文件,那么上传的时间应该会比较久,再加上网络不稳定各种因素的影响,很容易导致传输中断,用户除了重新上传文件外没有其他的办法......
  • 【不起作用】限制前端项目安装依赖的工具只能是:npm、yarn、pnpm中的一个
    前言安装依赖的工具有好几个,有时候我们在多个项目之间切换时,容易忘记,所以我们需要设置某个项目只能使用某一种依赖安装工具正文方案一(不推荐)本方案仅供提示作用,并不会强制限制首先项目根目录下新建一个.npmrc文件,内容为:engine-strict=true然后修改项目的package.js......