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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python 源码中 PyId_stdout 如何定义的

python 源代码中遇到一个变量名 PyId_stdout,搜不到在哪里定义的,如下只能搜到引用的位置(python3.8.10): 找了半天发现是用宏来构造的声明语句: // filepath: Include/cpython/object.h typedef struct …

Gradle build 失败后提示.lock文件,解决办法

在Gradle build失败之后时,有时候强制关闭AndroidStudio,再次打开build时,会提示各种.lock 文件问题,删除了一个还有下一个,而且路径不一样。 一般情况下是这两个文件夹下的lockfile影响继续build %GRADLE_HOME%/ca…

目标检测任务中常用的数据集格式(voc、coco、yolo)

一、Pascal VOC VOC数据集(Annotation的格式是xmI) Pascal VOC数据集是目标检测的常用的大规模数据集之一,从05年到12年都会举办比赛,比赛任务task: 分类Classification目标检测Object Detection语义分割Class Segmentation实例分割Object…

基于java+swing+mysql图书管理系统v8.0

基于javaswingmysql图书管理系统v8.0 一、系统介绍二、功能展示1.登陆及主页2.图书类别添加3.图书类别维护4.图书添加5.图书维护 三、系统实现1.BookManageMainFrame.java 四、其它1.其他系统实现 五、获取源码 一、系统介绍 该系统实现了用户登陆、图书类别管理(图书类别添加…

yolov5 onnx模型 转为 rknn模型

1、转换为rknn模型环境搭建 onnx模型需要转换为rknn模型才能在rv1126开发板上运行,所以需要先搭建转换环境 模型转换工具 模型转换相关文件下载: 网盘下载链接:百度网盘 请输入提取码 提取码:teuc 将其移动到虚拟机中&#xf…

基本排序算法

目录 一,插入排序 二,希尔排序 三,选择排序 四,冒泡排序 五,快排 5.1 Hoare法 5.2 挖坑法 5.3 指针法 5.4 非递归写法 六,归并排序 6.1 递归 6.2 非递归 一,插入排序 基本思想&…

CorelDraw怎么做立体字效果?CorelDraw制作漂亮的3d立体字教程

1、打开软件CorelDRAW 2019,用文本工具写上我们所需要的大标题。建议字体选用比较粗的适合做标题的字体。 2、给字填充颜色,此时填充的颜色就是以后立体字正面的颜色。我填充了红色,并加上了灰色的描边。 3、选中文本,单击界面左侧…

superset为何无法上传excel,csv等外部文件

superset为何无法上传excel,csv等外部文件 这是由于没有打开数据库的上传外部文件的权限 1.打开数据库连接设置,选择Allow file uploads to database 2.发现这里的上传链接都可以使用

c++ 类

类的引入 c 语言的结构体只能定义变量 但是 c的结构体除了定义变量之外,还可以定义函数。 感受感受: #define _CRT_SECURE_NO_WARNINGS 1//我们声明一个结构体 struct Stack {// c可以把函数写在结构体中//叫成员函数:// 如下://c的写法&am…

股票回购不积极,遭分析师看空,汽车之家财务前景黯淡

来源:猛兽财经 作者:猛兽财经 第一季度财报后股价表现不佳 汽车之家(ATHM)于2023年5月11日公布了2023年第一季度业财报绩。 猛兽财经通过查询财报得知,汽车之家第一季度的实际营收为2.21亿美元,正常每股收…

uniapp实现预约时间选择弹窗组件

做了个组件&#xff0c;实现出当日预约时间组件&#xff0c;效果图如下 废话不多说&#xff0c;直接上代码&#xff0c;代码简单&#xff0c;参数自己任意改 <template><view class"inventory"><u-popup :show"show" :round"10"…

开源快速开发平台:做好数据管理,实现流程化办公!

做好数据管理&#xff0c;可以提升企业的办公协作效率&#xff0c;实现数字化转型。开源快速开发平台是深受企业喜爱的低代码开发平台&#xff0c;拥有多项典型功能&#xff0c;是可以打造自主可控快速开发平台&#xff0c;实现一对一框架定制的软件平台。在快节奏的社会中&…

Docker的安装与部署

Docker 基本概念介绍 通俗理解&#xff1a;镜像是类&#xff0c;容器是对象实例 仓库 应用商店、镜像 下载的应用安装程序、容器 应用程序 镜像(Image) 这里面保存了应用和需要的依赖环境 为什么需要多个镜像&#xff1f;当开发、构建和运行容器化应用程序时&#xff0c;我们…

redis集群设置

先下载redis数据库可以在一台机器上设置redis集群高可用 cd /etc/redis/ mkdir -p redis-cluster/redis600{1..6} for i in {1..6} do cp /opt/redis-5.0.7/redis.conf /etc/redis/redis-cluster/redis600$i cp /opt/redis-5.0.7/src/redis-cli /opt/redis-5.0.7/src/redis-s…

二叉搜索树的本质

引言 打算写写树形数据结构&#xff1a;二叉查找树、红黑树、跳表和 B 树。这些数据结构都是为了解决同一个基本问题&#xff1a;如何快速地对一个大集合执行增删改查。 本篇是第一篇&#xff0c;讲讲搜索树的基础&#xff1a;二叉搜索树。 基本问题 如何在一千万个手机号中…

UniSSOView 任意命令执行复现

免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失,均由使…

动态内存管理面试题

动态内存管理面试题 文章目录 动态内存管理面试题一、第一题此代码存在的问题运行结果分析原因修改 二、第二题此代码存在的问题运行结果分析原因修改 一、第一题 代码如下&#xff08;示例&#xff09;&#xff1a; #include<stdio.h> #include<string.h> #incl…

Android开发之Fragment动态添加与管理

文章目录 主界面布局资源两个工具Fragment主程序 主界面布局资源 在activity_main.xml中&#xff0c;声明两个按钮备用&#xff0c;再加入一个帧布局&#xff0c;待会儿用来展示Fragment。 <?xml version"1.0" encoding"utf-8"?> <LinearLayo…

如何选择台式还是便携式多参数水质检测仪呢

选择台式还是便携式多参数水质检测仪主要取决于具体的使用需求和场景。 1.便携式多参数水质检测仪适用于需要在不同地点进行水质检测的情况&#xff0c;例如户外采样、实地调查等。它具有小巧轻便的特点&#xff0c;方便携带和操作&#xff0c;适合需要频繁移动或需要灵活使用的…

Go语言进阶语法八万字详解,通俗易懂

文章目录 File文件操作FileInfo接口权限打开模式File操作文件读取 I/O操作io包 文件复制io包下的Read()和Write()io包下的Copy()ioutil包总结 断点续传Seeker接口断点续传 bufio包bufio包原理Reader对象Writer对象 bufio包bufio.Readerbufio.Writer ioutil包ioutil包的方法示例…