前端开发日记——在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://xiahunao.cn/news/3246262.html

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

相关文章

LeetCode 4, 92, 155

目录 4. 寻找两个正序数组的中位数题目链接标签思路代码 92. 反转链表 II题目链接标签思路反转部分链表寻找 prev为什么使用 sentinel 代码 155. 最小栈题目链接标签思路栈的实现最小值的实现 代码 4. 寻找两个正序数组的中位数 题目链接 4. 寻找两个正序数组的中位数 标签 …

Qt类 | QPushButton类详解

文章目录 一、QPushButton介绍二、Properties(属性)三、Public Functions(公共函数)1.构造函数--构造按钮对象2.autoDefault与setAutoDefault函数--获取/设置按钮的自动默认状态3.isDefault与setDefault函数-- 获取/设置按钮的默认…

服务器的80和443端口关闭也能申请SSL证书

一、简介 在服务器的80和443端口关闭的情况下,确实可以申请SSL证书,但申请过程和方法会根据证书类型和验证方式的不同而有所差异。 通常如果是网站域名申请SSL证书,哪怕服务器的80、443端口都打不开,也可以通过DNS解析的方式来验…

【bypy】服务器代码定期同步到百度网盘

☆ 服务器代码定期同步到百度网盘 - 问题描述 代码的备份是一个重要的事情,可能经常会换服务器,也可能服务器会崩溃。这里教如何将代码同步到百度网盘。当然,智能同步到百度网盘指定的apps目录下 ★ 解决方案 step1. 安装bypy库 首先要确保…

Qt Style Sheets-设计器集成

设计器集成 Qt Designer(Qt Designer)是一个出色的工具,用于预览样式表。您可以在 Designer 中右键单击任何小部件,并选择“更改样式表...”来设置样式表。 在 Qt 4.2 及更高版本中,Qt Designer 还包括一个样式表语法…

layui 让table里的下拉框不被遮挡

记录:layui 让table里的下拉框不被遮挡 /* 这个是让table里的下拉框不被遮挡 */ .goods_table .layui-select-title,.goods_table .layui-select-title input{line-height: 28px;height: 28px; }.goods_table .layui-table-cell {overflow: visible !important; }.…

API取数实战:企业微信API取数教程

在数字化时代,企业微信不仅是一个通讯工具,更是企业数字化转型的重要平台。通过企业微信,企业能够高效连接员工、客户与合作伙伴,实现内部流程的自动化和智能化。本文将介绍企业微信API的应用场景和应用难点,并提供企业…

新发布,CAISP到底是啥?值得考吗

最近,百度旗下的“萝卜快跑”无人网约车引发热议,有很多人对其持欢迎态度,认为无人驾驶出租车价格低、服务好,不用担心司机车内抽烟,不用害怕司机路怒斗气,司乘矛盾没了,下雨天没人接单的麻烦也…

Java web从入门到精通 (第 2版)中文电子版

前言 《Java Web从入门到精通(第2版)》共分21章,包括Java Web应用开发概述、HTML与CSS网页开发基础、JavaScript脚本语言、搭建开发环境、JavaBean技术、Servlet技术、过滤器和监听器、Hibernate高级应用、Java Web的数据库操作、EL&#xf…

安卓手机如何恢复删除的照片?一篇文章,3个方法就够了

在这个手机摄影盛行的时代,我们的安卓手机早已不仅仅是一个通讯工具,更是记录生活、珍藏回忆的“时光机”。然而,生活中总有些“小插曲”让人哭笑不得——误删照片。安卓手机如何恢复删除的照片?别急,今天这篇文章就来…

代发考试战报:上海考试HCIP-Cloud Service SA云服务H13-821 ,667分险过

代发考试战报:7月9号上海考试HCIP-Cloud Service SA云服务H13-821 ,667分险过,考试当天上午10点买的题库,临阵磨枪,看了俩小时, 12点去考试的,刚及格,幸好题库准,一天看题…

17_Shell好用工具:awk

17_Shell好用工具:awk grep:查找 sed:编辑 cut:切割 awk:切割 可以通过定义变量、流程控制进行深度分析加工 一、awk内置变量 内置变量列出了几个常用的 内置变量含义FILENAME文件名NFNumber Of Fields,单…

自己调用yolov5模型进行前向推理时的报错

当我在自己的工程中调用yolov5的目标检测模型进行推理,代码大致如图: 当运行到如图箭头所指的位置的时候报如下错误: Traceback (most recent call last): File “/home/yons/train/code/mmpose/inference.py”, line 81, in pred yolo_m…

Windows 11预览补丁KB5040527影响火绒驱动加载的解决办法

7 月 11 日,微软更新Windows 11 预览版本补丁 KB5040527,补丁安装后会影响火绒驱动加载导致火绒安全软件服务异常,补丁相关信息如下: https://blogs.windows.com/windows-insider/2024/07/11/releasing-windows-11-builds-22621-…

知识图谱和 LLM:利用Neo4j驾驭大型语言模型(探索真实用例)

这是关于 Neo4j 的 NaLLM 项目的一篇博客文章。这个项目是为了探索、开发和展示这些 LLM 与 Neo4j 结合的实际用途。 2023 年,ChatGPT 等大型语言模型 (LLM) 因其理解和生成类似人类的文本的能力而风靡全球。它们能够适应不同的对话环境、回答各种主题的问题,甚至模拟创意写…

blender使用(三)常用建模操作及修改器

1,挤出图形 tab编辑模式,选中一个点/线/面,按键E,可以挤出对应的图形。选中点会挤出一条线,线会挤出一个面,面挤出体 2,倒角 选中一个边后,ctrlB ,拖动鼠标是倒角范围&am…

破解反爬虫策略 /_guard/auto.js(一) 原理

背景 当用代码或者postman访问一个网站的时候&#xff0c;访问他的任何地址都会返回<script src"/_guard/auto.js"></script>&#xff0c;但是从浏览器中访问显示的页面是正常的&#xff0c;这种就是网站做了反爬虫策略。本文就是带大家来破解这种策略&…

C/C++ 关机整人代码

目录 &#x1f4d2;温馨提示 &#x1f4d2;示例代码 &#x1f4d2;代码分析 &#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&…

深入浅出消息队列----【初始篇】

深入浅出消息队列----【初始篇】 一、思考&#xff1a;为什么会出现 “消息队列”二、RocketMQ 总览producerproducer groupnameSrvBrokerBroker clusterconsumerconsumer groupTopicTag 本文仅是文章笔记&#xff0c;整理了原文章中重要的知识点、记录了个人的看法 文章来源&a…

linux下Jenkins的安装部署

前言&#xff1a; 用docker安装Jenkins非常方便快捷&#xff0c;但是最近国内的docker镜像源都不好用了&#xff0c;这里回顾一下最原始的Jenkins安装方式 安装前准备 安装环境 Jenkins的运行依赖java环境&#xff0c;linux下jdk的安装参考&#xff1a;linux下JDK的安装-CSD…