nodejs/npm/yarn/vue/webpack概念介绍

最新推荐文章于 2025-02-11 19:20:42 发布
原创 最新推荐文章于 2025-02-11 19:20:42 发布 · 298 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Node.js是基于Chrome V8引擎的JavaScript运行环境，使得JavaScript能在服务器端运行。npm是Node.js的包管理器，Yarn是其替代品，两者用于管理和分享JS包。Vue是一个渐进式JavaScript框架，适合构建复杂应用。Webpack是一个模块打包工具，用于将开发的代码打包压缩，便于发布。这些工具共同推动了JavaScript生态的繁荣。

什么是nodejs

https://zhuanlan.zhihu.com/p/47822968
  • 是C++ 开发的
  • 是一个基于 Chrome V8 引擎的 Javascript 运行环境

原本js只能在浏览器中执行，有了nodejs，js可以直接在服务器运行，相当于一个js代码的解释器。

方便使用js来开发服务器程序，也打开了前端程序员走向后端开发的路径

什么是npm

https://www.npmjs.com/

在这里插入图片描述
有了nodejs的运行环境以后，更多的开发者开发了服务器运行的程序包，npm作为一个包管理器应运而生，更便于大家把开发好的轮子分享给世界，促进JS的繁荣

什么是yarn

https://yarnpkg.com/

同样是一个基于nodejs的包管理器，作用于npm一样，改进了npm的一些缺点，由几家大公司推出。

https://www.npmjs.com/package/yarn

yarn也是可以通过npm安装，相当于npm安装了一个取代自己的管理器，有点神奇。

什么是vue

https://cn.vuejs.org/

一个渐进式开发JavaScript 框架，所谓渐进式就是由浅入深，由底层到上层，个人理解是因为基于组件式的，方便搭积木的方法组建复杂的程序，所以是渐进式的意思，由简单到复杂的过程。

vue依赖于一些js的库，这些库可以由npm或者yarn来安装。

什么是webpack

https://webpack.docschina.org/

在这里插入图片描述
webpack是一个打包工具，从名字上就可以看出来，通过npm/yarn安装各种包，通过vue开发应用程序以后，开发环境当中有很多程序，不方便部署，webpack充当一个打包/发布的角色，将需要的js代码抽出来压缩成可以发布的文件，将文件发布到服务器即可通过浏览器使用。

nodeJs + webpack+vue+ element ui 环境安装
GIS摆渡人
04-18 774
文章目录一.安装nodeJs二.安装vue三.创建新项目四.使用vue-cli再一次创建新项目四.引入Elements ui五.运行已有项目六.补充安装axios +sass+store(1).安装axios(ajax的封装）(2).安装sass(3).安装store(4).引入jq(5).安装css-loader(6).安装better-scroll(7).vue项目添加一些触摸事件以及fastclick的支持(8).vue项目配置了babel-polyfill 兼容低版本浏览(9).配置jsonp(10
webpack、npm、node、nodejs之间的关系
10-23 618
简略： 1、手撸HTML,CSS,JS的时代已经过去，前端产品，不再是手撸HTML了，他们会先安装node.js，用npm，用webpack，用yarn，用各种cli。 2、vue-cli 是一个vue项目的脚手架，可以快速的构建一个vue的基于npm的模块化项目，vue内部的打包机制其实还是借助webpack； 3、webpack 是一个打包工具，可以帮你把你通过模块化开发的项目 打包为简洁版的浏览器可识别的静态资源； 4、npm包管理工具 传统的HTML,CSS,JS管理太繁杂，模块化就是
Node.js / npm / yarn / Vue / webpack 概念介绍
The Gao的博客
12-14 1185
Node.js Node.js是一个C++ 开发的基于 Chrome V8 引擎的 JavaScript 运行环境，相当于一个 JavaScript 代码的解释器。 原本 JavaScript 代码只能在浏览器中执行，有了Node.js， JavaScript 代码文件可以直接在服务器运行，方便使用 JavaScript 来开发服务器程序，也打开了前端程序员走向后端开发的路径。 npm npm 是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，相当于Java后端中的mave
使用yarn替代npm进行webpack项目开发的模块管理
欢迎关注公众号“雨林寻北”，添加个人微信codetrend（备注技术）。
04-27 543
引言 NodeJS 默认的包管理工具为 NPM ，在开发期间出现如下问题： 每个项目从 SVN checkout 后开发需要重复下载依赖包; 下载依赖包过程中网络请求容易发生异常(即使能正常访问的网站也会异常，如github); 与 Yarn 对标，这些问题似乎都得到了解决： Yarn 离线模式，缓存了每个下载过的包，所以再次使用时无需重复下载； Yarn 对网络请求过程优化，可以减少错...
NodeJS的npm包管理器
qq_36801250的博客
05-26 621
npm 是什么？ npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。 如何安装本地包 有两种方式用来安装 npm 包：本地安装和全局安装。至于选择哪种方式来安装，取决于我们如何使用这个包。 如果你自己的模块依赖于某个包，并通过 Node.js 的 req
nodejs和npm ,yarn，vue的安装教程
XQXOI的博客
02-04 500
注意： node安装后，node自带npm(所以只需要npm升级) npm 命令： npm -v :查看当前版本（电脑安装） npm view node version ：查看最新的版本（官网） npm install npm@latest -g ：npm升级为最新版本 安装yarn时，报了错误： 用npm安装yarn，yarn安装成功后， 但是查看yarn版本时，报错（错误信息为：yarn不是内部处理文件等文字） 解决方案：我就没有用npm安装yarn, 直接下载yarn: 安装地址：https://y
2021-05-06-前端-安装 vue 和 vue 脚手架环境-nodejs篇（涉及到npm和yarn的讲解）
小龙跳动的博客
11-04 2096
当我们开始学习vue，进入官网，官网会先提示我们学习它的几种安装方法： 1.最基础的是引入从官网下载的vue.js文件。 2.使用CDN引用官网提供的网上公开的vue.js可读链接(免于下载)。 3.使用npm命令直接安装整个vue的生产环境（包括运行环境）。 当然，安装vue环境只是为了运行需要，而我们做项目需要安装的是vueCLi脚手架，但这个阶段的我们还不明白什么是Cli脚手架，脚手架顾名思义相当于搭建大楼时，我们会打地基和房梁，然后在大楼外层搭上固定的脚手架后才能根据图纸施工。也就是说，安装
开发知识点-NodeJs-npm/Pnpm/Yarn包管理器
aming小老弟
11-08 1799
Node.js 是一个基于 Chrome V8 引擎的开源免费跨平台的 JavaScript 运行环境。由于 Node.js 进程尝试加载 providers.dll 时没有指定 DLL 的绝对路径。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。攻击者可以在当前工作目录写入恶意 DLL 文件进行 DLL劫持攻击。Windows 会按照特定策略进行搜索以找到所需的 DLL 文件。Node.js 组件存在 DLL 劫持漏洞。快速的，节省磁盘空间的包管理工具。
D:\nodejs\npm.cmd install npm notice npm notice New major version of npm available! 8.1.2 -> 11.4.2 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.4.2 npm notice Run npm install -g npm@11.4.2 to update! npm notice npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: vue-antd-jeecg@3.4.3 npm ERR! Found: webpack@4.47.0 npm ERR! node_modules/webpack npm ERR! webpack@"^4.0.0" from @vue/cli-plugin-babel@4.5.19 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"^4.0.0" from the root project npm ERR! webpack@"^4.0.0" from @vue/cli-service@4.5.19 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"^4.0.0" from the root project npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.19 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"^4.0.0" from the root project npm ERR! 1 more (@vue/cli-plugin-eslint) npm ERR! 4 more (@vue/cli-plugin-eslint, compression-webpack-plugin, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! vue-loader@"^15.7.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: webpack@5.99.9 npm ERR! node_modules/webpack npm ERR! peerOptional webpack@"^5.27.0" from css-loader@7.1.2 npm ERR! node_modules/css-loader npm ERR! peer css-loader@"*" from vue-loader@15.9.3 npm ERR! node_modules/vue-loader npm ERR! vue-loader@"^15.7.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See D:\nodejs\node_cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! D:\nodejs\node_cache\_logs\2025-06-23T00_24_15_040Z-debug.log
最新发布
06-24
例如，在引用[1]中提到的`vue-antd-jeecg@3.1.0`项目中，`webpack`的版本冲突导致了安装失败。以下是一些解决方法[^1]： #### 方法一：使用`--legacy-peer-deps`选项 可以通过添加`--legacy-peer-deps`选项来忽略...
基于mac下前端开发基本环境搭建 VSCode + git + node.js + npm+ webpack + vue-cli4 + nrm + yarn
weixin_43986955的博客
04-28 2083
笔记一篇，备查（PS：一个测试转前端的教程搬运工）。 第一步：安装编辑器vscode（有很多种编辑器，自己选择喜欢的，sublime,vscode，hbuilder,pychram…） vscode下载传送门 此处搬运大神写的安装配置教程： vscode安装教程 第二步：安装git git下载传送门 此处搬运大神写的详细安装配置教程： git安装教程 1.下载好git包后，双击打开，按照提示进行...
【前端笔记】前端包管理工具和构建打包工具介绍之npm、yarn、webpack、vite
qq_30436011的博客
12-01 4232
yarn和NPM的作用是相同的，都是用于管理软件包依赖，yarn解决了NPM的缺点，对NPM进行了改进，yarn的下载速度比NPM更快、更安全。yarn下载软件包之后，会在你的电脑本地缓存起来，下一次不会从镜像库重新下载，而是从本地镜像库中获取对应的包。webpack是基于node.js开发（只能用于node项目里面）的一款前端打包构建的工具，它可以将前端各个模块打包成一个或者多个文件，这样就可以减少文件数量，也就可以减少浏览器请求的数量，从而提高访问效率。
名词解释：npm，cnpm，yarn，vite，vue，electron
xiezhipu的博客
02-11 1417
Vite 是一个新型的前端构建工具，由 Evan You（尤雨溪）开发，主要特点是利用原生 ES Module 加速开发环境的启动时间。由于网络条件的原因，在中国大陆访问 npm 官方源可能会遇到速度慢的问题，因此 cnpm 提供了一个完整的 npm 镜像站点 npmmirror.com，同步频率为每十分钟一次。Yarn 是由 Facebook 推出的一款快速、可靠、安全的依赖管理工具，旨在解决 npm 在某些场景下的不足之处。每个工具都有其独特的优势和适用场景，选择合适的工具对于项目的成功至关重要。
不光教女朋友学会了Yarn，还让她明白了Yarn与npm的区别
huangfuyk.的博客
04-17 1万+
在进行正文之前，首先提供Yarn的三大网址，祝你练成Yarn功大法：Yarn官网、中文官网、Yarn Github地址 在安装Yarn之前，我们要确保已经成功安装了Node.js，关于Node.js的安装，可参考：Node.js的安装 Yarn的特点 Yarn的中文官网是这样介绍的： 速度超快： Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用...
三种出包命令npm, yarn, webpack的对比
hwxiaozhi的博客
08-15 1906
三种出包命令npm, yarn, webpack的对比
yarn+vite基本配置
热门推荐
黄敢敢i的博客
09-09 2万+
yarn 官网指引 英文官网：Yarn英文官网 中文文档：Yarn中文文档 Yarn 的优点 快速：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。 可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。 安全：在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。 window 系统安装 Yarn 下载安装包安装 点我下载Yarn安装包，你将下载到一个 .msi 文件，当它运行时会指引你将 Y
对vite的简单了解
汉堡请不要欺负面条
09-07 8232
vite 是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成： 一个开发服务器：它基于原生的es模块，提供了丰富的内建功能，如速度快到惊人的模块热更新HMR. 一套构建指令：使用Rollup打包代码，并且它是预构建的，可输出用于生产环境的高度优化过的静态资源。 vite旨在提供开箱即用的配置，但同时它也提供插件API和JavaSccript API 带来高度的可扩展性并且有完整的类型支持。
Webpack,npm,yarn 等 常用工具简介
03-27 416
yarn 运行 npm run dev 或 yarn run dev Webpack 运行 webpack -w 编译 npm run build 或npm install /gulp Grunt运行 grunt watch 现安装版本信息 node -v ...
Vue.js -------webpack
2201_76041915的博客
04-02 929
webpack本质是, 一个第三方模块包, 用于分析, 并打包代码支持所有类型文件的打包支持less/sass => css支持ES6/7/8 => ES5压缩代码, 提高加载速度什么是webpack呢?作用是什么?目的是?1. 它是一个模块包 2. 识别代码, 翻译, 压缩, 整合打包 3. 提高打开网站的速度。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值