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

news2024/10/6 14:34:19

Ⅰ、 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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java中的String使用注意事项、StringBuilder、StringBuffer、StringJoiner

String使用注意事项 这里第二次创造了0个对象是因为字符串常量池中已经有"abc" StringBuilder 注意StringBuilder支持链式编程 StringBuilder s new StringBuilder("abc"); s.append(666).append("acb" ).append(666); System.out.printl…

89、基于STM32单片机激光测距仪远距离倒车防撞报警器系统设计(程序+原理图+PCB源文件+参考论文+硬件设计资料+元器件清单等)

单片机主芯片选择方案 方案一:AT89C51是美国ATMEL公司生产的低电压,高性能CMOS型8位单片机,器件采用ATMEL公司的高密度、非易失性存储技术生产,兼容标准MCS-51指令系统,片内置通用8位中央处理器(CPU)和Flash存储单元&a…

操作系统8:存储器的层次结构及程序的装入和链接

目录 1、存储器的层次结构 (1)多层结构的存储器系统 1.1 - 存储器的多层结构 1.2 - 可执行存储器 (2)主存储器与寄存器 2.1 - 主存储器 2.2 - 寄存器 (3)高速缓存和磁盘缓存 3.1 - 高速缓存 3.2 …

使用wordpress搭建WebStack导航网站记录

0 序言 首先,我来介绍下,这个webstack导航网站实际上是被做成了wordpress的一个主题,具体这个主题的下载地址如下: WordPress 版 WebStack 导航主题https://github.com/owen0o0/WebStack 我们不需要使用git clone命令&…

【观察者模式】 ——每天一点小知识

💧 观察者模式 \color{#FF1493}{观察者模式} 观察者模式💧 🌷 仰望天空,妳我亦是行人.✨ 🦄 个人主页——微风撞见云的博客🎐 🐳 《数据结构与算法》专栏的文章图文并茂🦕…

uni-calendar 日历控件自定义点的颜色功能

增加自定义点的颜色功能,官方空间点的颜色是固定红色 1、修改的页面 uni-calendar-item 在uni-calendar-item页面中的这个标签中加上一个style属性,判断传过来的参数是否存在bgcolor背景颜色,有的话添加背景色,没有则不添加默认系…

【DBA课程-笔记】第 4 章:MongoDB数据库管理备份

课程大纲 MongoDB备份机制数据库的恢复数据库的导出数据库的导入MongoDB面试题 一、MongoDB备份机制 1. MongoDB备份方式 磁阵列文件系统快照 Filesystem Snapshots复制数据文件 CPmongodump 备份 和 mongorestore 恢复工具mongoimport 导入 和 mongoexport 导出工具MongoD…

Qt - 模型视图

模型/视图 概念 模型/视图结构将数据存储和界面展示分离,分别用不同的类实现 模型:存储数据视图:界面上的视图组件显示模型中的数据;在视图组件里修改的数据会被自动保存在模型中 源数据 内存中的一个字符串列表 磁盘文件系统结构…

【二叉树part08】| 669.修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

目录 🎈LeetCode669. 修剪二叉搜索树 🎈LeetCode108.将有序数组转换为二叉搜索树 🎈LeetCode538.把二叉搜索树转换为累加树 🎈LeetCode669. 修剪二叉搜索树 链接:669.修剪二叉搜索树 给你二叉搜索树的根节点 root…

用于 3D 建模和渲染应该选择怎么样的配置?

选择合适的机器可能会使决定变得困难。在分析图像时,它还需要一定数量的核心和线程,这绝对是一个怪物。渲染一般是使用GPU或者CPU来进行,从而产生渲染效果。 3D 建模是一种用于构建和评估实际物理对象的虚拟 3D 模型的应用程序。该技术应用于…

Mvc进阶(下)

Mvc进阶(下) 1.前言2.上次代码弊端1.利用xml建模反射优化1.XMl文件2.对xml建模 3.修改中央控制器 3.再优化1.先优化Action子控制器4.优化传值问题 4.总结 1.前言 虽然前面文章深入解析Java自定义MVC框架的原理与实现讲述了Mvc框架,但是那只能…

suse ha for sap scale-up性能优化场景安装配置

1. 安装SUSE操作系统 在官网下载SUSE Linux Enterprise Server for SAP Applications安装介质,在安装操作系统过程中,选择SUSE Linux Enterprise Server for SAP Applications操作系统。 在软件选择界面,根据需要选择SAP HANA Server Base…

oracle connect by很强,但是要慎用,不然有你哭的时候

前言: 第四次工业革命,带来了科技的巨大变更,同时带来了很多半结构化数据,很多数据会做成集合、JSON的形式存储到数据库中,通过ETL工具我们将这些数据抽取到数仓里面,我们怎么进行分析呢?这些数据类似这样的…

centos7安装git及maven

安装git 直接使用yum安装,指令如下: yum install git然后执行如下指令判断是否安装完成: git --version紧接着需要维护git的用户名及邮箱等信息 git config --global user.name "zzy" git config --global user.email "ex…

JS知识点汇总(十四)--事件循环

1. 对事件循环的理解 JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事 JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删…

QT学习笔记:调整控件大小和位置

前面的文章,我讲了怎么用layout去布局。但布局做完后,发现界面有点怪。比如,最低下的“清除”按钮这么大,“消息体”这个label没有位于中间等。下面,我就来讲下怎么把界面继续优化。 1、调整“清除”按钮大小和位置 …

第八步:STM32F4 EXTI

1.0 外部中断概述 STM32F4的每个IO都可以作为外部中断输入。 STM32F4的中断控制器支持22个外部中断/事件请求: EXTI线0~15:对应外部IO口的输入中断。 EXTI线16:连接到PVD输出。 EXTI线17:连接到RTC闹钟事件。 EXTI线18&#xff1…

Kubernetes(k8s)实战:Kubernetes(k8s)部署Springboot项目

文章目录 一、练手:k8s部署部署wordpressmysql1、创建wordpress命名空间2、创建mysql数据库3、创建wordpress应用4、小结 二、实战:部署自己的springboot项目1、准备一个springboot项目2、使用docker打成镜像3、使用k8s部署springboot 三、实战&#xff…

pycharm配置虚拟环境

pychram配置虚拟环境,然后使终端在该目录下 win键r 输入cmd, 进入dos命令。使用conda create -n cleanRobot python3.7 创建cleanRobot虚拟环境。 输入: conda activate cleanRobot 进行虚拟环境激活。 我们在安装的anaconda的目录下可以看到刚刚建…

Java批量操作Excel文件实践

摘要:本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 | 问题背景 在操作Excel的场景中,通常会有一些针对Excel的批量操作&…