资讯动态

Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程

发布时间:2026/10/23 1:41:03 来源:尧图企业网站定制
Ⅰ、Yarn工具简介1、什么是yarn工具:Yarn是facebook发布的一款取代npm的资源包管理工具是一个快速、可靠、安全的依赖管理工具一款新的JavaScript资源包管理工具(吐槽下最大的弊端是要通过npm来安装)2、yarn对比npm工具的优点其一、npm方面A、npm install很慢特别是新的项目拉下来要等半天重新install的时候依旧如此在删除node_modules会因其他原因不能成功删除;B、版本无法保持一致性同一个项目安装的时候模块版本无法保持一致性这是由于package.json文件中版本号的缘故C、安装报错被覆盖安装的时候包会在同一时间下载和安装中途某个时候一个包抛出了一个错误但是npm会继续下载和安装包;其二、yarn方面A、安装速度更快离线缓存yarn缓存了每个下载过的包所以再次使用时无需重复下载;同时利用并行下载以最大化资源利用率因此安装速度更快。B、安装版本一致在执行代码之前Yarn会通过算法校验每个安装包的完整性;并且为了防止拉取到不同的版本Yarn有一个锁定文件(lock file)记录了被确切安装上的模块的版本号;C、简洁语义yarn改变了一些npm 命令的名称比如yarn add/remove会比npm原本的install/uninstall更清晰;3、想下载并使用yarn管理vue项目的原因其一、因为在用npm工具来管理vue项目时报错(但错误原因没找到)npm ERR! ENOTEMPTY: directory not empty, rename /usr/local/lib/node_modules/webpack - /usr/local/lib/node_modules/.webpack-ENG41nb9// 报错的整体代码为npmERR!codeENOTEMPTYnpmERR!syscall rename npmERR!path/usr/local/lib/node_modules/webpack npmERR!dest/usr/local/lib/node_modules/.webpack-ENG41nb9 npmERR!errno-66npmERR!ENOTEMPTY:directory not empty,rename/usr/local/lib/node_modules/webpack-/usr/local/lib/node_modules/.webpack-ENG41nb9npmERR!Acomplete logofthisrun can be foundin:其二、而用yarn工具来管理vue项目时没报错;Ⅱ、在Vue项目中安装Yarn的步骤:1、安装yarn的命令npm install -g yarn2、在VSCode中查看yarn版本:报错若有报错请继续按顺序阅读若没有报错就直接跳到3、进行阅读其一、报错的信息为yarn 无法加载文件 “C:\Users\admin\AppData\Roaming\npm\yarn.ps1因为在此系统上禁止运行脚本其二、报错的整体信息为其三、但在cmd命令中并未报错其四、该问题的解决方案为// 请看这篇地址的文章https://blog.csdn.net/weixin_43405300/article/details/131533816?spm1001.2014.3001.55013、在VSCode中查看yarn版本:未报错其一、查看yarn版本没问题在 VScode 环境中输入命令yarn --version显示结果为1.22.19其二、但此时若直接输入yarn run serve命令没有效果4、执行命令yarn install5、执行命令yarn run serve// 此时就成功运行起来了且访问也没有问题;Ⅲ、小结其一、哪里有不对或不合适的地方还请大佬们多多指点和交流其二、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑