mac下安装vue cli脚手架并搭建一个简易项目

目录

1、确定本电脑下node和npm版本是否为项目所需版本。
2、下载vue脚手架
3、创建项目

1、下载node。

如果有node,打开终端,输入node -v和npm -v , 确保node和npm的版本,(这里可以根据自己的需求去选择,如果对最新版本的内容有要求,也可以选择最新版本)如果没有node,可以点击nodejs官网去下载Node.js官网.(一般选择LTS稳定版本)
选择需要下载的版本后,根据安装引导一步一步进行安装即可。

()
安装完成后,打开终端,输入

node -v
npm -v

如下图所示,输出本电脑的安装node和npm的版本号,即可安装成功。
在这里插入图片描述

2、下载vue cli 脚手架

继续在终端输入

sudo npm install -g @vue/cli

这里会让你输入mac的密码,当你输入的时候在终端上不会显示,输入结束,直接回车,就会自动进行安装。

在这里插入图片描述

tips:意外情况一

如果出现了以下情况,代表npm版本过低,需要升级下npm,直接输入sudo npm install -g npm@9.8.1 回车即可。(根据自己当下情况进行版本的更改)

sudo npm install -g npm@9.8.1

在这里插入图片描述

tips:意外情况二

如果执行 npm install -g @vue/cli 之后出现了图片内的错误,重新在终端输入 sudo npm install -g @vue/cli 即可。

sudo npm install -g @vue/cli

在这里插入图片描述
最后在终端输入 vue -V 即可查看是否安装成功。
在这里插入图片描述

tips:意外情况三

如果输入vue -V出现的是vue的版本号,依次往下进行创建项目的话,会显示一下图片出现的情况,就代表vue cli没有安装成功。

在这里插入图片描述

解决办法:
第一步:输入sudo npm uninstall -g vue-cli 将旧版本卸载掉
第二步:输入 vue -V
此时会显示 zsh:command not found: vue
第三步:重新输入 sudo npm install -g @vue/cli

即以下:

sudo npm uninstall -g vue-cli
vue -V
sudo npm install -g @vue/cli

在这里插入图片描述
最后重新在终端输入 vue -V ,会显示版本号为安装成功。

3、创建项目

继续在终端输入 sudo vue create 项目名 回车自动创建。(此时需要输入mac密码)

sudo  vue create 项目名

输入Y
然后根据项目是vue2.0还是vue3.0选择一个往下进行。
在这里插入图片描述
在这里插入图片描述
创建项目成功。
在这里插入图片描述
在这里插入图片描述

打开终端输入 sudo yarn serve 项目即启动。

在这里插入图片描述

在这里插入图片描述

解释:
为什么mac执行命令需要加sudo
因为权限不够。sudo是管理员身份来使用,也可以不输入。sudo是mac特有的,和windows不一样,相当于在windows中右键管理员运行cmd 或者powershell。

参考资料:

vue官网:https://cn.vuejs.org/guide/introduction.html
node官网:https://nodejs.org/en

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

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

相关文章

【朴素贝叶斯-新闻主题分类】

朴素贝叶斯对新闻进行分类 朴素贝叶斯算法是一种常用的文本分类方法,特别适用于自然语言处理任务,如新闻分类。在这篇博客中,我们将使用Python的scikit-learn库来实现朴素贝叶斯算法,并将其应用于新闻分类任务。 数据准备 首先…

IO进程线程day3(2023.7.31)

一、Xmind整理&#xff1a; 文件描述符概念&#xff1a; 二、课上练习&#xff1a; 练习1&#xff1a;用fread和fwrite实现文件拷贝 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <head.h> int main(int argc, const char…

什么叫前后端分离?为什么需要前后端问题?解决了什么问题?

单体架构出现的问题 引出&#xff1a;来看一个单体项目架构的结构 通过上述可以看到单体架构主要存在以下几点问题&#xff1a; 开发人员同时负责前端和后端代码开发&#xff0c;分工不明确开发效率低前后端代码混合在一个工程中&#xff0c;不便于管理对开发人员要求高(既会前…

千元内合板和单板吉他怎么选?SAGA萨伽SF600和VEAZEN费森CLR300怎么样?哪一款更适合初学者入门使用!【吉他评测】

对于预算不多的朋友&#xff0c;在选购前翻阅查询很多资料&#xff0c;吉他材质、桶型和尺寸等等疑问&#xff0c;不知道怎么选&#xff0c;无从下手&#xff0c;还容易遇到烧火棍&#xff0c;在这里介绍这两款VEAZEN费森CLR300&#xff08;单板&#xff09;和SAGA萨伽SF600&am…

vuejs源码阅读之代码生成器

代码生成器是模版编译的最后以后&#xff0c;它的作用是将AST转换成渲染函数中的内容&#xff0c;这个内容可以称为代码字符串。 代码字符串可以被包装在函数中执行&#xff0c;这个函数就是我们通常说的渲染函数。 渲染函数被执行之后&#xff0c;可以生成一份VNode&#xf…

分治法 Divide and Conquer

1.分治法 分治法&#xff08;Divide and Conquer&#xff09;是一种常见的算法设计思想&#xff0c;它将一个大问题分解成若干个子问题&#xff0c;递归地解决每个子问题&#xff0c;最后将子问题的解合并起来得到整个问题的解。分治法通常包含三个步骤&#xff1a; 1. Divid…

【Python系列】Python基础语法轻松入门—从变量到循环

目录 写在前面 语法介绍 变量 数据类型 整数 浮点数 字符串 列表 元组 字典 运算符 算术运算符 比较运算符 逻辑运算符 条件语句 循环语句 图书推荐 图书介绍 参与方式 中奖名单 写在前面 Python 是一种高级、解释型的编程语言&#xff0c;具有简单易学…

华为数通HCIP-IGMP(网络组管理协议)

IGMP&#xff08;网络组管理协议&#xff09; 作用&#xff1a;维护、管理最后一跳路由器以及组播接收者之间的关系&#xff1b; 应用&#xff1a;最后一跳路由器以及组播接收者之间&#xff1b; 原理&#xff1a;当组播接收者需要接收某个组别的流量时&#xff0c;会向最后…

Yolov8新版本解读:优化点如何加入新版本,通过加入EMA注意力进行对比说明

本文目的: 最近yolov8进行了一次较大的更新,对一些优化点加在哪个位置上有些变动,因此本文主要通过具体案列进行对比和说明,以便在新版本上能够轻松上手。 老版本 ultralytics/nn 新版本更新为: modules文件夹下内容如下: 解读: 将modules.py拆分为 1.__init__.…

7.31--Day01实战单体项目苍穹外卖

总结 今天回来在高铁上构想了一下&#xff0c;感觉大二有很多的事情要做&#xff0c;这个暑假还有一个月不能浪费了&#xff0c;回来最重要的事情就是看病了&#xff0c;身体一定要调养好了&#xff0c;大二的规划&#xff0c;大二上继续做省大创&#xff0c;需要做的有软件开…

vue表单筛选

目录 筛选 HTML scss* filterComp 排序 表格 自定义数据样式 inner-table 分页 删除 default-modal 自定义元素的插槽-占位符 .search-wrap {height: 60px;display: flex;align-items: center;overflow: hidden;padding: 0 20px;.selected-options-wrap {flex: 1;.…

centos7安装mysql数据库详细教程及常见问题解决

mysql数据库详细安装步骤 1.在root身份下输入执行命令&#xff1a; yum -y update 2.检查是否已经安装MySQL&#xff0c;输入以下命令并执行&#xff1a; mysql -v 如出现-bash: mysql: command not found 则说明没有安装mysql 也可以输入rpm -qa | grep -i mysql 查看是否已…

如何监控系统的运行的状况

问题提出&#xff1a; 系统状态不稳定&#xff0c;需要排查原因&#xff0c;所以需要监视所有进程的资源&#xff0c;以及进程是那个程序&#xff08;有些进程名写的一样&#xff0c;需要根据PID查看是哪个执行文件&#xff09; 方法&#xff1a; 1. 使用subprocess函数&…

java基础复习(第二日)

java基础复习(二) 1.抽象的&#xff08;abstract&#xff09;方法是否可同时是静态的&#xff08;static&#xff09;&#xff0c;是否可同时是本地方法&#xff08;native&#xff09;&#xff0c;是否可同时被 synchronized修饰&#xff1f; 都不能。 抽象方法需要子类重写…

YOLOv8目标检测代码如何实现训练、测试、调用摄像头实时检测和追踪的接口调用脚本

实现训练、测试、调用摄像头实时检测和追踪的接口调用脚本 目录 介绍训练模型图片测试视频流测试目标跟踪结论 介绍 YOLOv8是单阶段目标检测的集大成之作&#xff0c;它可以帮助我们在图像或视频中自动识别和定位感兴趣的目标物体。本文将介绍如何调用YOLOv8的API实现训练、…

mysql的json处理

写在前面 需要注意&#xff0c;5.7以上版本才支持&#xff0c;但如果是生产环境需要使用的话&#xff0c;尽量使用8.0版本&#xff0c;因为8.0版本对json处理做了比较大的性能优化。你你可以使用select version();来查看版本信息。 本文看下MySQL的json处理。在正式开始让我们先…

第三篇-Tesla P40+CentOS7+CUDA 11.7 部署实践

硬件环境 系统&#xff1a;CentOS-7 CPU: 14C28T 显卡&#xff1a;Tesla P40 24G 准备安装 驱动: 515 CUDA: 11.7 cuDNN: 8.9.2.26 安装依赖 yum clean all yum update yum install -y gcc gcc-c pciutils kernel-devel-$(uname -r) kernel-headers-$(uname -r)查看GPU信息…

元类的认识和基础用法

元类 “元类就是深度的魔法&#xff0c;99%的⽤户应该根本不必为此操⼼。 如果你想搞清楚 究竟是否需要⽤到元类&#xff0c;那么你就不需要它。 那些实际⽤到元类的⼈都⾮常 清楚地知道他们需要做什么&#xff0c;⽽且根本不需要解释为什么要⽤元类。“——蒂姆彼得斯TimPeter…

PostgreSQL数据库中,查询时提示表不存在的解决办法

最近遇到一个奇怪的问题&#xff0c;以前从来没有遇到过&#xff0c;在postgres SCHEMA下执行select * from table1语句时&#xff0c;提示表不存在&#xff0c;而实际这个表确是存在的&#xff0c;只不过是在public SCHEMA下。在public SCHEMA下执行这个sql语句是没有问题的。…

【Linux下6818开发板(ARM)】在液晶屏上显示RGB颜色和BMP图片

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…