前端开发日记——在MacBook上配置Vue环境

news2024/9/22 23:38:23

前言

大家好,我是来自CSDN的寄术区博主PleaSure乐事。今天是开始学习vue的第一天,我使用的编译器是vscode,浏览器使用的是谷歌浏览器,后续会下载webstorm进行使用,当前学习阶段使用vscode也是可以的,不用担心太多。


安装Node.js和npm

在配置Vue环境前,我们需要先下载两位关键先生——node.js和npm。下载它们有两种方法,如下:

官网下载

下载安装包

首先最安全稳定的方法就是从官网下载。我们首先进入node.js的官网https://nodejs.org下载长期的node.js,即带有LTS字样的版本,我选择的是20.15.1版本,下载界面如下:

下载完成后,在相应的下载路径上点开pkg文件,一直点击继续即可完成下载。

检查是否下载完成

一直“继续”之后,我们可以打开终端,输入如下命令就可以检查相应安装信息。需要注意的是在我们安装node的同时npm也已经安装完成,不需要额外安装。

node -v
nmp -v

此时node和npm就已经安装完成。

终端下载

在终端当中下载我们需要用到Homebrew,并使用如下代码,加之以node -v就可以进行安装,此类文章在CSDN中较多,我没有进行实践,大家可以自行搜索参考。

brew install nodejs

安装相关镜像

接下来为了进行下载上的加速,我们最好在终端输入如下指令,配置某宝镜像并确认是否已经配置完成,增加下载速度:

npm config set registry https://registry.npmmirror.com

npm config get registry

下载相应vue包

前面博主的安装都顺风顺水,除了在终端敲入相关的命令看的有些头大以外,没有遇到困难。此时第一个小卡顿出现了:

npm install -g @vue/cli

此时我们需要在终端输入如上的代码进行vue包安装。但是这样输入一般都会报错,看到这里是第一个小劝退点,此时的博主有一点慌了,一大堆英文。但是经过查询发现是缺少root权限,增加sudo+开机密码即可完美解决报错,代码如下:

sudo npm install -g @vue/cli

此时开机密码尽量一次输对,因为这个时候输入开机密码是不会显示的,因此如果不小心输错了可以将错就错,先回车再来,否则一直按删除容易乱。

安装完成后会出现add xxx in xx s,意思就是在xx秒当中增加了xxx个包,出现这样的语句就说明已经成功安装。如果出现changed也不要慌,说明你可能已经安装过了。

在vscode中运行

此时我们需要一个vscode,这个是我们学习前端必备的工具之一,没有的小伙伴都建议安装。

然后打开vscode,我们在某个专门用于vue的文件夹中进行接下来的操作。

正常流程

首先我们需要在菜单栏中找到终端并打开:

接下来输入创建相关vue环境的代码:vue create vue001

随后会遇到多个需要我们进行选择的选项,如下图所示,大家可以按照我的选择进行,也可以自行选择:

如果一切顺利,则会进入一段安装,此时可能会跳出是否安装git,大家根据需要自行选择,都可以。安装完成后会提示输入两小段代码,如下:

​​​​​​​

我们根据提示以此进行输入:

cd vue
npm run serve

输入完成后会提示已经成功配置,并跳出两段localhost的“网址”,在浏览器中开启后会展示如下页面:

此时我们就已经顺利完成配置,并可以开始快乐的写代码了。

报错

在这一部分,有的小伙伴可能会有下面类似的报错提示:

这个时候不要慌,博主已经替你们慌过了,这个时候博主经过某问查询发现这是缺少某些管理员权限。而且在vscode当中我们打开的终端已经告诉了我们答案,大家需要找到一句“To permanently fix this problem, please run:”的语句,并将它冒号后的代码复制到终端当中,就可以解决如上的错误。


总结

按照这样的方法,我们就可以顺利在vscode当中安装vue环境,希望对大家有所帮助。如果对您有帮助,希望您可以留下点赞、关注或评论,这对我很重要,谢谢!

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

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

相关文章

达梦数据库的系统视图v$arch_file

达梦数据库的系统视图v$arch_file 在达梦数据库中,V$ARCH_FILE 是一个动态性能视图,用于显示当前数据库的归档日志文件信息。这个视图可以帮助数据库管理员监控和管理归档日志文件,确保数据库的备份和恢复过程顺利进行。 查询本地归档日志信…

算法第十天:leetcode203.移除链表元素

一、203.移除链表元素题目描述 203.移除链表元素的链接如下所示,您可复制下面链接网址进入力扣学习,看题解之前一定要先做一遍哦! https://leetcode.cn/problems/remove-linked-list-elements/description/https://leetcode.cn/problems/rem…

WsgiDAV:强大的 WebDAV 解决方案

一、软件介绍 WsgiDAV 是一款卓越的开源 WebDAV 服务器和客户端库,由 Python 精心编写而成。它为用户搭建了一座通过 HTTP/HTTPS 协议访问和管理远程文件系统的便捷桥梁。 WsgiDAV 的核心是一个严格遵循 WebDAV 标准的中间件,能够与任何 WSGI 兼容的 W…

fastJSON 解决kafka消息斜杠转义问题

Bug: kafka发送消息时的JSON转义异常 问题描述: 问题描述:kafka消息发送出去但是消费者执行相关逻辑的时候报错. 场景:当时实习的时候需要模拟数据做一个实时经纬度传输的接口,使用kafka实时发送消息将数据同步到数据库中 问题分析: fastjson使用不当可能导致转义异常**,kafka…

【系统架构设计】操作系统(一)

操作系统(一) 操作系统的类型和结构操作系统基本原理进程管理进程三态模型挂起状态进程互斥 / 进程同步前趋图进程调度死锁 存储管理设备管理文件管理作业管理 操作系统原理的关键在于“一个观点、两条线索”:一个观点是以资源管理的观点来定…

Rust Result 与可恢复的错误

Result 与可恢复的错误 大部分错误并没有严重到需要程序完全停止执行。有时,一个函数会因为一个容易理解并做出反应的原因失败。例如,如果因为打开一个并不存在的文件而失败,此时我们可能想要创建这个文件,而不是终止进程。 回忆…

Python进阶(4)--正则表达式

正则表达式 在Python中,正则表达式(Regular Expression,简称Regex)是一种强大的文本处理工具,它允许你使用一种特殊的语法来匹配、查找、替换字符串中的文本。 在这之前,还记得之前我们是通过什么方法分割…

动手做Agent:产品经理与程序员的相爱想杀

引言 以前在大厂做产品经理的时候,很多次我恨不得想要撸起袖子自己 coding。现在自己独立开始做,才知道动手开发的确比想象中困难,尽管我勉强也可以看得懂代码,真是“眼看百遍不如动手一遍”。 就像周末我立下豪言给小幼兽 DIY …

机器学习第四十八周周报 IAGNN

文章目录 week48 IAGNN摘要Abstract0. 前言1. 题目2. Abstract3. 网络结构3.1 问题定义3.2 IAGNN 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.4 实验结果 5. 结论6.代码复现小结参考文献 week48 IAGNN 摘要 本周阅读了题为Interaction-Aware Graph Neural Networks…

SpringCloud------Sentinel(微服务保护)

目录 雪崩问题 处理方式!!!技术选型 Sentinel 启动命令使用步骤引入依赖配置控制台地址 访问微服务触发监控 限流规则------故障预防流控模式流控效果 FeignClient整合Sentinel线程隔离-------故障处理线程池隔离和信号量隔离​编辑 两种方式优缺点设置方式 熔断降级-----…

【C++初阶】多态

重写子类时不要求必须有 virtual 关键字 虚函数允许派生类重写这个函数,并确保即使是通过基类指针调用该函数,也能调用到派生类的版本 虚函数关键字 virtual 只在声明时加上,在类外实现时不用加 虚函数只需在类声明中加上 virtual 关键字&a…

COD论文学习 ZoomNext

现有方法的不足之处 高内在相似性:伪装物体与背景之间的高内在相似性使得检测变得困难,现有方法难以准确区分二者。多样化的规模和模糊的外观:伪装物体在规模和外观上多样化,且可能严重遮挡,导致现有方法难以处理。不…

景联文科技构建高质量心理学系知识图谱,助力大模型成为心理学科专家

心理大模型正处于快速发展阶段,在临床应用、教育、研究等多个领域展现出巨大潜力。 心理学系知识图谱能够丰富心理大模型的认知能力,使其在处理心理学相关问题时更加精确、可靠和有洞察力。这对于提高心理健康服务的质量和效率、促进科学研究以及优化教育…

vue项目build以后整合到springboot项目里面---------gxl

很多时候我们需要用到vue的组件,但是全栈的背景下懒得去搞前后端分离,很多权限校验后台都写好了,没必要再去做接口或者前端写一遍了,因此我们需要把打包后的项目整合到项目里面。 整合也很简单,照常vue项目开发&#…

Seaborn库学习之heatmap()函数

Seaborn库学习之heatmap(函数) 一、简介 seaborn.heatmap是Seaborn库中用于绘制热图(Heatmap)的函数。热图是一种数据可视化技术,通过颜色的变化来展示数据矩阵中的数值大小。这种图表非常适合展示数值数据的分布和关系,尤其是在…

什么是MIMO?(通俗易懂)

MIMO,一句话解释:多输入多输出(Multi Input Multi output) 用图说话,图①-图④,分别代表: ① SISO:单输入单输出 ( Single Input Single Output ) ② SIMO:单输入多输出…

YOLOV5学习记录

前言: 计算机视觉 什么是目标检测? 物体分类和目标检测的区别 目标检测,物体的类别和位置 学习选题,口罩检查,人脸识别 算法原理:知乎,csdn,目前还没到这种程度 大大滴崩溃&am…

木舟0基础学习Java的第二十天(线程,实现,匿名有名,休眠,守护,加入,设计,计时器,通信)

多线程 并发执行的技术 并发和并行 并发:同一时间 有多个指令 在单个CPU上 交替执行 并行:同一时间 有多个指令 在多个CPU上 执行 进程和线程 进程:独立运行 任何进程 都可以同其他进程一起 并发执行 线程:是进程中的单个顺…

鸿蒙语言基础类库:【@system.mediaquery (媒体查询)】

媒体查询 说明: 从API Version 7 开始,该接口不再维护,推荐使用新接口[ohos.mediaquery]。本模块首批接口从API version 3开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import mediaquery from sy…

【进阶篇-Day10:JAVA中泛型、平衡二叉树、红黑树、TreeSet集合的介绍】

目录 1、泛型1.1 泛型类1.2 泛型方法1.3 泛型接口1.4 泛型通配符1.5 总结 2、数据结构(树)2.1 树的基本介绍2.2 二叉树的介绍2.2.1 概念:2.2.2 二叉查找树的介绍:2.2.3 二叉查找树添加节点:2.2.4 二叉查找树查找节点&a…