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

news/2025/1/16 3:44:56/

目录

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.ppmy.cn/news/987150.html

相关文章

android Glide加载gif动图和本地视频,Java

droid Glide加载gif动图和本地视频,Java //从手机存储本地加载视频 String filePath "/storage/emulated/0/Pictures/my_video.mp4"; Glide .with( context ).load( Uri.fromFile( new File( filePath ) ) ).into( imageView );//加载gif Glide .with(…

Drupal教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Drupal是使用PHP语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和PHP开发框架(Framework)共同构成,在GPL2.0及更新协议下发布。连续多年荣获全球最佳CMS大奖&…

【Git】初始化仓库配置与本地仓库提交流程

目录 一、仓库配置邮箱与用户名 二、本地仓库提交流程 一、仓库配置邮箱与用户名 【Git】Linux服务器Centos环境下安装Git与创建本地仓库_centos git仓库搭建_1373i的博客-CSDN博客https://blog.csdn.net/qq_61903414/article/details/131260033?spm1001.2014.3001.5501 在…

【算法与数据结构】110、LeetCode平衡二叉树

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析:二叉树遍历一共有前中后遍历和层序遍历,这道题只有后序遍历适合,求深度是从上往…

应用层协议——http

文章目录 1. HTTP协议1.1 认识URL1.2 urlencode和urldecode1.3 HTTP协议格式1.3.1 HTTP请求1.3.2 HTTP响应1.3.3 外网测试1.3.4 添加html文件1.3.5 HTTP常见Header1.3.6 GET和POST 1.4 HTTP的状态码1.4.1 301和3021.4.2 代码实现 1.5 Cookie1.5.1 代码验证1.5.2 Cookiesession …

使用多数据源dynamic-datasource-spring-boot-starter遇到的问题记录

记录使用多数据源dynamic-datasource-spring-boot-starter遇到的问题&#xff1a; 1、工程启动失败 缺少clickhouse连接驱动&#xff0c;引入对应的maven依赖 <!--ck连接驱动--><dependency><groupId>ru.yandex.clickhouse</groupId><artifactId>…

利用Redis实现向量相似度搜索:解决文本、图像和音频之间的相似度匹配问题

在自然语言处理领域&#xff0c;有一个常见且重要的任务就是文本相似度搜索。文本相似度搜索是指根据用户输入的一段文本&#xff0c;从数据库中找出与之最相似或最相关的一段或多段文本。它可以应用在很多场景中&#xff0c;例如问答系统、推荐系统、搜索引擎等。 比如&#…

【Postman】Newman安装与环境配置完整版(内含安装过程中遇到的问题与解决方案)

文章目录 概要Newman安装三步走一、nodejs安装与环境配置1、安装2、环境配置 二、安装newman1、步骤2、问题与解决方案 三、安装newman-reporter-html 概要 Newman&#xff1a;一款基于nodejs开发的可以运行Postman脚本的工具&#xff0c;并且可以生成测试报告。本文介绍了New…