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,因为在此系统上禁止运行脚本

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

在这里插入图片描述

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

在这里插入图片描述

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

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

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

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

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

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

在这里插入图片描述

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

在这里插入图片描述

4、执行命令:yarn install

在这里插入图片描述

5、执行命令: yarn run serve

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

在这里插入图片描述

Ⅲ、小结:

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在blender中使用python程序化建模

blender中,所有可以在Blender软件中的手动操作,基本都可以通过Python API 完成 那么就可以用这个完成程序化生成 下面我给出一个简单的方块建模程序: 在scripting中,可以添加file,然后向场景中心放置一个正方体 首…

RK3588平台开发系列讲解(Camera篇)OV569摄像头调试

文章目录 一、摄像头识别检测二、查看摄像头支持的格式三、摄像头采集格式查询四、摄像头采集格式查询沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要讲解OV569摄像头调试。 OV5695 是一种图像传感器,用于摄像头设备。要进行 OV5695 摄像头的调试,通常涉…

100种思维模型之能力圈思维模型-91

芒格说: “ 一个人在一生中可以真正得到的真见卓识仍然非常有限,所以正确的决策必须局限在自己的 ‘ 能力圈’ 以内。 ” 巴菲特说: “对你的 能力圈 来说,最重要的不是能力圈的范围大小,而是你如何能够 确定能…

Django核心

安装django pip install django # pip install django3.1.6创建django项目 在一个项目中可以包含多个应用程序。 django-admin startapp app_name #创建一个应用程序 django-admin startproject project_name #创建一个项目运行django项目 python manage.py runserver 80…

2. PS基本操作

因为网页美工大部分效果图都是利用PS ( Photoshop )来做的,所以以后我们大部分切图工作都是在PS里面完成 ●文件—>打开:可以打开我们要测量的图片 ●CtrlR : 可以打开标尺,或者视图—>标尺 ●右击标尺,把里面的单位改为像素 ●Ctrl加号…

Spring Boot实战:拦截器和监听器的应用指南

当使用Spring Boot时,我们可以通过拦截器(Interceptor)和监听器(Listener)来实现对请求和响应的处理。拦截器和监听器提供了一种可插拔的机制,用于在请求处理过程中进行自定义操作,例如记录日志…

【保姆级教程】PyCharm通过SSH远程连接ModelArts

文章目录 一、创建Notebook二、配置SSH三、配置远程Python解释器四、成果展示 一、创建Notebook 首先,找到云资源下面的 ModelArts,然后点击并进入 ModelArts控制台。 在ModelArts控制台中,点击开发环境下的 Notebook 。然后点击创建&#x…

NB-IoT学习笔记 —— NB-IoT介绍

一、简介 NB-IoT 是指窄带物联网(Narrow Band Internet of Things)技术,是一种低功耗广域(LPWA)网络技术标准,基于蜂窝技术,用于连接使用无线蜂窝网络的各种智能传感器和设备,聚焦于…

Airtest:Windows桌面应用自动化测试四【Airtest之python本地环境安装、独立IDE运行】

Airtest之python本地环境安装、独立IDE运行 一、环境配置二、安装Airtest三、安装poco四、常见问题4.1若运行代码时,在cv2模块报ImportError: DLL load failed: 找不到指定模块的错,有几种解决方案:4.1.1.本问题的根本原因应该是DLL文件的缺失…

供应链管理系统有哪些模块?

先弄搞清楚:供应链管理的概念与定义 供应链管理(Supply Chain Management ,简称SCM):就是指在满足一定的客户服务水平的条件下,为了使整个供应链系统成本达到最小而把供应商、制造商、仓库、配送中心和渠道商等有效地组织在一起来进行的产品…

list容器语法

文章目录 listlist基本概念list的优点:list的缺点:重要性质 list 的使用方法list构造函数list 赋值和交换list 长度/大小操作list 插入元素和删除元素访问list 反转和排序sort链表排序案例forward_list(C11)forward_list 的使用方…

STM32模拟I2C获取TCS34725光学颜色传感器数据

STM32模拟I2C获取TCS34725光学颜色传感器数据 TCS34725是RGB三色颜色传感器,和TCS34727都属于TCS3472系列,在电气特性上略有差别,TCS34727相比TCS34725在I2C总线的访问电平上可以更低,而在I2C软件访问地址方面则一致。 TCS3472内…

Nuget更新全局包、缓存和临时文件夹路径位置

Nuget更新缓存 1、查看默认的Nuget路径2、更改全局包路径2.1 通过环境变量来进行修改2.2通过Nuget.Config配置文件来进行修改 3、更改http-cache路径4、更改temp文件路径5、更改plugins-cache文件路径 NuGet是一个流行的软件包管理器,可以帮助.NET开发人员轻松地添加…

内嵌 iframe 实现PDF预览

效果图如下&#xff1a; 代码如下&#xff1a; <template><div><!-- 控制浮层显示隐藏 --><el-button type"primary" size"small" class"btn" click"dialogVisible true">PDF 预览 (内嵌 iframe)</el-but…

2021 RoboCom 世界机器人开发者大赛-高职组(初赛)

编程题得分&#xff1a;100 总分&#xff1a;100 目录 7-1 机器人打招呼 (5分) 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 7-2 人脸识别 (10分) 输入格式&#xff1a; 输出格式&#xff1a; 输入样例 1&#xff1a; 输…

yolov5增加AFPN-全新特征融合模块AFPN,效果完胜PAFPN

论文学习&#xff1a;AFPN: Asymptotic Feature Pyramid Network for Object Detection-全新特征融合模块AFPN&#xff0c;完胜PAFPN_athrunsunny的博客-CSDN博客 先上配置文件yolov5s-AFPN.yaml # YOLOv5 &#x1f680; by Ultralytics, AGPL-3.0 license# Parameters nc: 80…

OpenCV:深入Feature2D组件——角点检测

角点检测 1 Harris角点检测1.1 兴趣点与角点1.2 角点检测1.3 harris角点检测1.4 实现harris角点检测&#xff1a;cornerHarris()函数1.5 综合案例&#xff1a;harris角点检测与测绘 2. Shi—Tomasi角点检测2.1Shi—Tomasi角点检测概述2.2 确定图像强角点&#xff1a;goodFeatur…

实时包裹信息同步:WebSocket 在 Mendix 中的应用

场景介绍 在现代物流中&#xff0c;能够实时跟踪包裹信息&#xff0c;尤其是包裹重量&#xff0c;是非常重要的。在这种场景中&#xff0c;我们可以使用称重设备获取包裹的信息&#xff0c;然后实时将这些信息同步给 Mendix 开发的 App&#xff0c;并在 App 的页面上实时显示包…

用git下载gitee上的项目资源

目录 用git下载gitee上的项目资源 用git 的clone 命令 然后到gitee上复制相关的下载地址&#xff1a; 粘贴到clone后面即可&#xff08;注意地址与clone之间有空格&#xff01;&#xff01;&#xff01;&#xff09; 运行结果&#xff1a; 用git下载gitee上的项目资源 用git…

MySQL安装与部署

第一种方法&#xff1a;在线安装 配置一个安装yum源 Adding the MySQL Yum Repository 可以手动配置yum源&#xff0c;baseurl指向国内镜像源地址&#xff0c;比如清华、中科大。 Installing MySQL Starting the MySQL Server&#xff1a; 查询临时登录密码 修改数据库密码…