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

news2024/10/6 2:32:21

目录

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.coloradmin.cn/o/800929.html

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

相关文章

JVM | 类加载是怎么工作的

类加载是怎么工作的 引言类加载器工作原理 | 城市建设过程1. 类加载器加载类前过程JVM进程启动 | 建筑工程立项Bootstrap类加载器创建扩展和应用类加载器 | 高级工程师的两位得力助手 2. 类加载器加载类后过程应用类加载器加载Building链接过程(验证,准备…

Huge and Efficient! 一文了解大规模预训练模型高效训练技术

本文分为三部分介绍了大模型高效训练所需要的主要技术,并展示当前较为流行的训练加速库的统计。文章也同步发布在AI Box知乎专栏(知乎搜索 AI Box专栏),欢迎大家在知乎专栏的文章下方评论留言,交流探讨! 引…

计算机图形学十四路径追踪与渲染方程

路径追踪(Path Tracing)与渲染方程(Render Equation) 简介 利用路径追踪我们可以实现比whitted-style ray tracing更好的全局光照(GI)效果。它的理论基础是渲染方程,最开始由吉姆卡吉亚&#…

066、故障处理之热点问题

为什么要解决热点 分布式架构中各个组件的理想状态:资源利用率相对均衡 形成写热点的原因 高频访问的小表SQL执行计划不合理具有顺序增长属性的索引扫描 数据组织模型 例如数据是序列递增,则有可能数据全部都集中一个region上 ,或者集中…

什么是等保定级?

TOC 一、等保评测介绍 1.1 等保定级目的 网络安全等级保护介绍:目的就是涉及民生问题的信息系统,要按照影响,提前划定等级 实施网络安全保护 信息系统:就是保护的系统,比如 魔幻的 健康码系统安全产品:健…

【lesson5】linux常见权限问题

文章目录 目录权限umask粘滞位 目录权限 先来思考一个问题: 进入一个目录需要什么权限呢? 由上图我们可以得知,进入目录需要x权限,那么没有r和w权限是什么情况呢? 从图中我们可以得知没有r权限不能查看目录里面的内容&#xff…

基于STM32设计的智能教室管理系统

前言 本文介绍了一个智慧教室的设计,该设计由电器设备控制系统、环境检测系统和考勤系统三大模块构成。通过使用STM32微处理器和物联网电器设备控制中心,实现对教室内风扇、照明灯和窗帘等电器设备的智能化统一控制与运行。同时,环境检测系统可以实时监测环境光强、温度、湿…

模型调参及优化

调参 调权重参数,偏置参数 训练数据集用来训练参数w,b 调超参数 验证数据集用来选择超参数学习率lr,隐藏层大小等 如何调参 当泛化误差和训练误差都没有降下去说明欠拟合;当训练误差降下去,但泛化误差出现上升形式&…

33. 本地记事本

本地记事本 html部分 <button class"add"><i class"iconfont icon-jiahao"></i> </button>css部分 *{margin: 0;padding: 0; } body{background-color: #7bdaf3;display: flex;padding-top: 3rem;flex-wrap: wrap; } .add{pos…

Vue2基础一、快速入门

零、文章目录 Vue2基础一、快速入门 1、Vue 概念 &#xff08;1&#xff09;为什么学 前端必备技能 岗位多&#xff0c;绝大互联网公司都在使用Vue 提高开发效率 高薪必备技能&#xff08;Vue2Vue3&#xff09; &#xff08;2&#xff09;Vue是什么 **概念&#xff1a;…

第二届“鼎信杯”榜单发布,麒麟信安荣获“优秀技术支撑奖”

由中国电子信息产业发展研究院、北京市海淀区人民政府主办&#xff0c;中国软件评测中心&#xff08;工业和信息化部软件与集成电路促进中心&#xff09;、中关村科学城管委会和北京市国际技术贸易协会承办的“2023 鼎信杯信息技术发展论坛”日前在北京举办。麒麟信安受邀参加主…

和鲸 ModelWhale 与麒麟系统适配认证,打造自主安全、性能可靠的信创 AI 基础软件

发展信创&#xff0c;解决核心技术的自主可控问题&#xff0c;是我国产业升级和数字经济发展过程中的重要命题。信创产业链主要由基础硬件、基础软件、应用软件、信息安全及云计算平台等几部分组成&#xff0c;拥抱信创国产化需要各厂商聚力共创生态&#xff0c;增强自身产品的…

JSONPath提取器案例详解

jsonpath语法 $ 表示根节点&#xff0c;也是所有jsonpath表达式的开始 . 表示获取子节点 .. 表示获取所有符合条件的内容 * 代表所有的元素节点 [] 表示迭代器的标示&#xff08;可以用于处理下标等情况&#xff09; [,] 表示多个结果的选择 ?() 表示过滤操作 表示当前节点一…

【QT】Day1

1. 收到实现登录框 要求&#xff1a; 1、登录窗口更改标题、图标 2、设置固定尺寸、并给定一定的透明度 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> //信息调试类&#xff0c;用于打印输出的 #include <QIcon>…

windows命令行

参考:https://blog.csdn.net/u014419722/article/details/130427423 1、 创建文件夹&#xff08;mkdir或md&#xff09; 创建单个文件&#xff1a;mkdir cmd_test 创建二级文件&#xff1a;mkdir cmd_test\456\123 创建多个文件&#xff1a;mkdir cmd_test\000 cmd_test\111 2…

【js】javascript中base64转file、file压缩图片:

文章目录 一、效果图:二、实现代码: 一、效果图: 二、实现代码: /*** base64转file* param {string} urlData base64格式图片* returns */ export function base64ConvertFile(urlData) {if (typeof urlData ! string) {this.$toast("urlData不是字符串")return;}va…

IDEA 模块不加载依旧是灰色 没有变成小蓝色的方块

Settings > Build, Execution, Deployment > Build Tools > Maven > Ignored Files下降对应的模块勾选掉 但通常在Maven的配置中&#xff0c;您会找到一个名为“ignoredFiles”的列表&#xff0c;其中包含被忽略的文件和目录。您可以通过取消选中所需的文件或目录…

腾讯云—自动挂载云盘

腾讯云&#xff0c;稍微麻烦了点。 腾讯云服务器&#xff0c;镜像为opencloudos 8。 ### 1、挂载云盘bash #首先通过以下命令&#xff0c;能够看到新的数据盘&#xff0c;如果不能需要通过腾讯云控制台卸载后&#xff0c;重新挂载&#xff0c;并重启服务器。 fdisk -l#为 /dev…

【iVX】低代码未来发展趋势

未来低代码开发将更加注重用户体验、集成能力、自动化水平和移动支持。同时&#xff0c;应用场景也将进一步扩展&#xff0c;安全与可靠性也将得到更大程度的关注和加强。这些发展方向将进一步推动低代码开发在各个行业和领域的广泛应用和发展。 增强设计能力&#xff1a;低代码…

RFID技术如何赋能化工行业?

化工生产是指在化工行业中&#xff0c;将原材料经过一系列的物理、化学或生物过程转化为最终产品的过程。RFID技术在化工行业中提供了实时跟踪、自动化控制、安全监测和环境管理等方面的帮助&#xff0c;对于提高生产效率、质量控制和安全性具有重要的意义。我们通过典型的化工…