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

前言

大家好,我是来自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.comnpm 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.mzph.cn/news/873068.shtml

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

相关文章

Jupyter Notebook安装及基本使用

Jupyter Notebook安装及基本使用 目录 Jupyter Notebook安装及基本使用方式一:Anaconda直接安装方式二:pip命令安装Jupyter使用虚拟环境 方式一:Anaconda直接安装 安装Anaconda 下载地址,输入邮箱,Windows下载 开始安…

【sgWatermark.js】自定义组件:基于Vue2+html2canvas实现全局水印效果

sgWatermark.js源码 import html2canvas from html2canvas; // npm install --save html2canvas (官网:https://html2canvas.hertzen.com) export default {addWatermark({container document.body, // 水印添加到的容器innerHTML "水印文字内容", //…

最大文件句柄数

优质博文:IT-BLOG-CN 灵感来源 一、什么是文件句柄 文件句柄File Handle是操作系统中用于访问文件的一种数据结构,通常是一个整数或指针。文件句柄用于标识打开的文件,每个打开的文件都有一个唯一的文件句柄。 它们是对文件、网络套接字或…

实战:功能强大齐全BBS论坛项目Echo简介

项目简介 Echo 是一套前后端不分离的开源社区系统,基于目前主流 Java Web 技术栈(SpringBoot MyBatis MySQL Redis Kafka Elasticsearch Spring Security ...),并提供详细的开发文档和配套教程。包含帖子、评论、私信、系…

InstaPrism能否平替BayesPrism(贝叶斯棱镜)?

上一期内容提到了BayesPrism算法用于单细胞数据的反卷积,BayesPrism算法在实际应用中非常占用计算资源以及消耗使用者的时间。那么是否有较好的替代包呢? 曾老师告诉了我一个R包—InstaPrism,他希望我将其和BayesPrism算法做个对比。 开发者…

使用Python Turtle绘制圣诞树和装饰

简介(❤ ω ❤) 在这篇文章中,我们将探索如何使用Python的Turtle模块来绘制一个充满节日气氛的圣诞树,以及一些可爱的装饰品。Turtle是一个受Logo语言启发的图形库,非常适合初学者学习编程和创建图形。 码农不是吗喽(大学生版&…

【常见开源库的二次开发】基于openssl的加密与解密——单向散列函数(四)

目录: 目录: 一、什么是单项散列函数? 1.1 如何验证文件是否被修改过 1.2 单项散列函数: 二、单向hash抗碰撞 2.1 弱抗碰撞(Weak Collision Resistance) 2.2 强抗碰撞(Strong Collision Resista…

图像边缘检测中Sobel算子的原理,并附OpenCV和Matlab的示例代码

Sobel算子是一种用于图像边缘检测的离散微分算子。它结合了图像的平滑处理和微分计算,旨在强调图像中强度变化显著的区域,即边缘。Sobel算子在图像处理中被广泛使用,特别是在计算机视觉和图像分析领域。 Sobel算子的原理 Sobel算子主要用于计…

大模型入门(一)—— LLaMa/Alpaca/Vicuna

LLaMa模型是Meta开源的大模型,模型参数从7B到65B不等,LLaMa-7B在大多数基准测试上超过了GPT3-173B,而LLaMa-65B和Chinchilla-70B、PaLM-540B相比也极具竞争力。相比于ChatGPT或者GPT4来说,LLaMa可能效果上还有差距,但相…

HyperBDR云容灾,让低碳未来有“迹”可循

全球气候变化时刻牵动着我们的心。生活在同一个地球下,万博智云始终坚持环境友好,携手企业和合作伙伴在保持市场竞争力、促进企业可持续发展的同时,共同肩负起守护地球环境的责任。 HyperBDR云容灾以“碳足迹”践行低碳容灾 云产品及数据中心…

Qt界面假死原因

创建一个播放器类,继承QLabel,在播放器类中起一个线程用ffmpeg取流解码,将解码后的图像保存到队列,在gui线程中调用update()刷新显示。 当ffmpeg打开视频流失败后调用update()将qlabel刷新为黑色,有一定概率会使得qla…

随机采样一致性算法RANSAC

点云分割 图自:https://openaccess.thecvf.com/content_cvpr_2017/papers/Qi_PointNet_Deep_Learning_CVPR_2017_paper.pdf《PointNet:用于3D分类和分割的点集深度学习》 点云分割(Point Cloud Segmentation)是计算机视觉和3D图像处理中的一个重要步骤,…

数据结构——位图布隆过滤器

一、位图 1.1 概念 所谓位图,就是用每一位来存放某种状态,适用于海量数据,数据无重复的场景。通常是用来判断某个数据存不存在的。 数据是否在给定的整形数据中,结果是在或者不在,刚好是两种状态,那么可以…

Android获取当前屏幕显示的是哪个activity

在 Android 中,要获取当前屏幕显示的 Activity,可以使用以下几种方法: 方法一:使用 ActivityManager 获取当前运行的任务信息 这是一个常见的方法,尽管从 Android 5.0 (API 21) 开始,有些方法变得不太可靠…

log4js node日志插件

最近不是特别忙在用express搭建后台项目,在开发过程中遇到了需要输入日志的问 本来想直接用node自带的console来实现,后来发现console输出的日志达不到自己希望的 日志格式,后来各种百度发现了log4js插件,本文来记录log4js插件使用…

STM32智能工业自动化监控系统教程

目录 引言环境准备智能工业自动化监控系统基础代码实现:实现智能工业自动化监控系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:工业自动化与管理问题解决方案与优化收尾与总结 1. 引言 智能…

基于zynq的视频采集与hdmi显示(未完)

文章目录 一、项目整体框架一、传感器配置与驱动二、IMX222 1080P 模式图像解析(bayer 2 rgb 模块)2.1 解析有效像素(gen_sync)2.1.1同步字详细介绍: 2.2 bayer 2 rgb 一、项目整体框架 一、传感器配置与驱动 camera信息:索尼IMX222摄像头 SPI&#xf…

Android10.0 锁屏分析-KeyguardPatternView图案锁分析

首先一起看看下面这张图: 通过前面锁屏加载流程可以知道在KeyguardSecurityContainer中使用getSecurityView()根据不同的securityMode inflate出来,并添加到界面上的。 我们知道,Pattern锁所使用的layout是 R.layout.keyguard_pattern_view&a…

【内网穿透】如何本地搭建Whisper语音识别模型并配置公网地址

个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119qq.com] &#x1f4f1…

【机器学习】Grid Search: 一种系统性的超参数优化方法

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 Grid Search: 一种系统性的超参数优化方法引言什么是Grid Search?Gr…