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

这篇具有很好参考价值的文章主要介绍了Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ⅰ、 Yarn 工具简介:

1、什么是 yarn 工具:

Yarnfacebook 发布的一款取代 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'

// 报错的整体代码为:

npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/webpack
npm ERR! dest /usr/local/lib/node_modules/.webpack-ENG41nb9
npm ERR! errno -66
npm ERR! ENOTEMPTY: directory not empty, rename '/usr/local/lib/node_modules/webpack' -> '/usr/local/lib/node_modules/.webpack-ENG41nb9'

npm ERR! A complete log of this run can be found in:
其二、而用 yarn 工具来管理 vue 项目时,没报错;

Ⅱ、在 Vue 项目中安装 Yarn 的步骤:

1、安装 yarn 的命令:

npm install -g yarn

2、在 VSCode 中查看 yarn 版本: 报错:

若有报错请继续按顺序阅读,若没有报错就直接跳到 3、进行阅读;

其一、报错的信息为:

yarn 无法加载文件 “C:\Users\admin\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本

其二、报错的整体信息为:

Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程,Vue,vue.js,vscode,前端,yarn,经验分享

其三、但在 cmd 命令中,并未报错:

Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程,Vue,vue.js,vscode,前端,yarn,经验分享

其四、该问题的解决方案为:

// 请看这篇地址的文章:

https://blog.csdn.net/weixin_43405300/article/details/131533816?spm=1001.2014.3001.5501

3、在 VSCode 中查看 yarn 版本: 未报错:

其一、查看 yarn 版本没问题:

在 VScode 环境中,输入命令:yarn --version,显示结果为:1.22.19

Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程,Vue,vue.js,vscode,前端,yarn,经验分享

其二、但此时,若直接输入 yarn run serve 命令,没有效果:

Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程,Vue,vue.js,vscode,前端,yarn,经验分享

4、执行命令:yarn install

Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程,Vue,vue.js,vscode,前端,yarn,经验分享

5、执行命令: yarn run serve

// 此时就成功运行起来了,且访问也没有问题;

Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程,Vue,vue.js,vscode,前端,yarn,经验分享

Ⅲ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章来源地址https://www.toymoban.com/news/detail-525595.html

到了这里,关于Vue :在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(71)
  • vue-cli3项目本地启用https,并用mkcert生成证书

    1、安装命令:npm install -g mkcert 判断是否安装成功,输入命令:mkcert --version,如果能看到版本号,说明安装成功,可以进行下一步 2、生成一个ca证书,mkcert create-ca,生成之后会看到一个ca.crt和ca.key文件 利用刚刚生成的ca证书,再生成cert证书,mkcert create-cert,会在刚刚的路径

    2024年02月04日
    浏览(42)
  • Windows中安装nvm进行Node版本控制与详细使用教程

    nvm英文全程也叫node.js version management,是一个nodejs的版本管理工具。nvm和npm都是node.js版本管理工具,但是为了解决node各种不同之间版本存在不兼容的问题,因此可以通过nvm安装和切换不同版本的node。 可在点此在github上下载最新版本,本次下载安装的是windows版本。打开网址我

    2024年02月10日
    浏览(44)
  • yarn启动vue项目

    1.nodeljs 使用yarn运行项目首页要确保电脑上已经安装了node.js,node -v,查看是否已经安装过node了。 2.安装yarn npm install -g yarn 3.查看yarn yarn --version 4.使用yarn安装依赖 yarn install 5.运行项目 yarn run dev、yarn run serve 6.编译项目 yarn run build 7.安装yarn遇到问题: 导致此错误的原因是,

    2024年02月17日
    浏览(36)
  • Vscode中安装 n 命令来切换 node 版本以适应不同项目不同的node版本号

    Centos中第一次安装的node(因为下载的源码是最新的)是最新的版本18.14.0的,但发现项目启动的时候提示  这时候会有两个选择:  卸载node然后重新安装符合项目的版本,比较麻烦,有时候可能node还卸载不干净导致一系列其他问题;  利用node自带的npm工具来安装 n 来管理n

    2024年02月09日
    浏览(53)
  • 【SpingBoot】详细介绍SpringBoot项目中前端请求到数据库再返回前端的完整数据流转,并用代码实现

    在SpringBoot项目中,前端请求到最终返回的完整数据流转一般包括以下几个步骤: 前端发送HTTP请求到后端Controller。 Controller接收到请求后,调用相关Service处理业务逻辑。 Service调用DAO层获取数据。 DAO层访问数据库获取数据。 数据库返回数据给DAO层。 DAO层将数据返回给Servic

    2024年02月10日
    浏览(41)
  • 保姆级教程 从零配置nodejs环境并用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp

    本教程后面部分(用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp)适合习惯使用vscode或Webstorm等(或者说不习惯HBuilder X)的人参考,如果习惯使用HBuilder X,还是建议使用HBuilder X来搭建uniapp项目,会方便很多。 目录 1. 配置node.js 1.1 下载并安装 1.2 配置环境变量 1.3 修改安装

    2024年02月20日
    浏览(49)
  • ubuntu 22.04配置开发环境 [Fcitx5中文输入法+配置 & 迁移vscode & 安装flameshot & 微信 & mysql &workbench & yarn工具 & zsh]

    一、安装Fcitx5 最简单三步骤,把下面的命令都跑一遍之后重启电脑,不要去下载搜狗输入法,非常垃圾 Fcitx 5 主程序 中文输入法引擎 图形界面相关 转载自掘金 二、安装 配置 vscode 安装的两种方法: 官网选择deb安装包 cd进安装包目录运行 直接在ubuntu software里搜索vscode安装

    2024年01月21日
    浏览(46)
  • linux中安装node,npm和yarn

    在Linux系统上安装Node.js,按照以下步骤进行操作: 打开终端:使用任何适用的方法打开终端。 更新软件包列表:执行以下命令以确保系统的软件包列表是最新的。 安装Node.js:使用包管理器(例如apt)安装Node.js。以下是使用apt安装Node.js的命令: 这将安装Node.js的最新稳定版

    2024年02月16日
    浏览(41)
  • 【解决问题】Vue 项目中安装依赖 npm install 一直报错

    在 GitHub 上面找了几个项目,下载下来想执行以下,首先根据 README 文档进行安装依赖: 但接下来就一直报错,报错信息如下: 搜寻了好多种解决方法,依然不行,最后看到一篇博客说是  C盘 User 文件夹中的  .npmrc 文件 的问题,于是我尝试删除该文件,再次进行  npm inst

    2024年02月02日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包