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

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

相关文章

ctfshow-web入门-php特性(web127-web131)

目录 1、web127 2、web128 3、web129 4、web130 5、web131 1、web127 代码审计: $ctf_show md5($flag); 将 $flag 变量进行 MD5 哈希运算,并将结果赋值给 $ctf_show。 $url $_SERVER[QUERY_STRING]; 获取当前请求的查询字符串(que…

防御笔记第七天(时需更新)

1.防火墙的可靠性: 因为防火墙不仅需要同步配置信息,还需要同步状态信息(会话表等),所以防火墙不能像路由器那样单纯靠动态协议来进行切换,还需要用到双击热备技术。 双机---目前双机技术仅仅支持两台防火…

Python Linux环境(Centos8)安装minicoda3+jupyterlab

文章目录 安装miniconda安装python环境启动 最近服务器检查,我下面的服务器有漏洞,不得已重装了,正好记录下怎么从零到python写代码。 安装miniconda miniconda是anconda的精简版,就是管理python环境的得力助手。 # 创建一个名…

微服务

微服务 SpringCloud的五大组件 eureka服务注册和发现 nacos的工作流程 nacos和eureka的区别 负载均衡 ribbon负载均衡策略 如何自定义负载策略 服务雪崩 服务熔断 为服务端监控 项目中的限流 seata xa模式 AT模式 tcc模式 分布式服务接口幂等 分布式任务调度

linux服务器配置conda环境安装教程

1 软件准备 1.1 软件下载 https://repo.anaconda.com/archive/index.html 根据官网选择自己需要的版本。 这里下载的是 Anaconda3-2023.03-1-Linux-x86_64.sh 或者直接在linux中输入 wget -c https://repo.anaconda.com/archive/Anaconda3-2023.03-1-Linux-x86_64.sh 1.…

WebSocket实现群聊功能、房间隔离

引用WebSocket相关依赖 <dependency><groupId>javax.websocket</groupId><artifactId>javax.websocket-api</artifactId><version>1.1</version></dependency><dependency><groupId>org.springframework</grou…

安全防御:智能选路

目录 一、智能选路 1.1 就近选路 1.2 策略路由 1.3 虚拟系统---VRF 二、全局选路策略 1&#xff0c;基于链路带宽进行负载分担 2&#xff0c;基于链路质量进行负载分担 3&#xff0c;基于链路权重的负载分担 4&#xff0c;根据链路优先级的主备备份 DNS透明代理 一、…

Java学习高级四

JDK8开始&#xff0c;接口新增了三种形式的方法 接口的多继承 内部类 成员内部类 静态内部类 局部内部类 匿名内部类 import javax.swing.*; import java.awt.event.ActionEvent;public class Test {public static void main(String[] args) {// 扩展 内部类在开发中的真实使用…

STM32的TIM1之PWM互补输出_死区时间和刹车配置

STM32的TIM1之PWM互补输出_死区时间和刹车配置 1、定时器1的PWM输出通道 STM32高级定时器TIM1在用作PWM互补输出时&#xff0c;共有4个输出通道&#xff0c;其中有3个是互补输出通道&#xff0c;如下&#xff1a; 通道1&#xff1a;TIM1_CH1对应PA8引脚,TIM1_CH1N对应PB13引…

‍我想我大抵是疯了,我喜欢上了写单元测试

前言 大家好我是聪。相信有不少的小伙伴喜欢写代码&#xff0c;但是对于单元测试这些反而觉得多此一举&#xff0c;想着我都在接口文档测过了&#xff01;还要写什么单元测试&#xff01;写不了一点&#xff01;&#xff01; 由于本人也是一个小小程序猿&#x1f649;&#xf…

nginx代理缓存

在服务器架构中&#xff0c;反向代理服务器除了能够起到反向代理的作用之外&#xff0c;还可以缓存一些资源&#xff0c;加速客户端访问&#xff0c;nginx的ngx_http_proxy_module模块不仅包含了反向代理的功能还包含了缓存功能。 1、定义代理缓存规则 参数详解&#xff1a; p…

【前端】ikun-qrcode:极简的二维码生成组件,使用view而非canvas避免层级问题

文章目录 背景ikun-qrcode界面效果如何发布一款自己的插件到uniapp市场。&#xff08;5分钟搞定&#xff09; 背景 之前在uniapp上100行搞定二维码生成&#xff0c; 现在封装为vue组件分享出来&#xff1a; 下载地址&#xff1a; https://ext.dcloud.net.cn/plugin?id19351 …

【MySQL篇】Percona XtraBackup工具备份指南:常用备份命令详解与实践(第二篇,总共五篇)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…

jenkins系列-01.docker安装jenkins

进入官网&#xff1a;https://www.jenkins.io/ 使用LONG term support版本&#xff1a;2.387.1 docker pull jenkins/jenkins:2.387.1-lts 拉取镜像&#xff1a; 编写docker-compose文件&#xff1a; 启动jenkins: 查看启动日志&#xff1a; 默认生成的密码&#xff1a;…

防火墙NAT地址转换和智能选举综合实验

一、实验拓扑 目录 一、实验拓扑 二、实验要求&#xff08;接上一个实验要求后&#xff09; 三、实验步骤 3.1办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 3.2分公司设备可以通过总公司的移动链路和电信链路访…

【Android】活动之间的穿梭

引入 在活动的初学建立了一个简单的活动&#xff0c;但只有一个活动不是过于简单&#xff0c;在你使用手机的时候按下一个按钮可能会跳转到下一个界面&#xff0c;此时就是活动之间的穿梭&#xff1a;使用Intent在活动之间穿梭 Intent&#xff1a;是android程序中各组件之间进…

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

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

HarmonyOS NEXT学习——@BuilderParam装饰器

初步理解&#xff0c;相当于VUE的插槽slot Builder function overBuilder() {}Component struct Child {label: string ChildBuilder customBuilder() {}Builder customChangeThisBuilder() {}BuilderParam customBuilderParam: () > void this.customBuilder; // 使用自定…

RK3568笔记三十六:LED驱动开发(设备树)

若该文为原创文章&#xff0c;转载请注明原文出处。 记录使用设备树编写一个简单的 LED 灯驱动程序 一、编程思路 程序编写的主要内容为添加 LED 灯的设备树节点、在驱动程序中使用 of 函数获取设备节点中的 属性&#xff0c;编写测试应用程序。 • 首先向设备树添加 LED 设备…

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

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