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

这篇具有很好参考价值的文章主要介绍了mac下安装vue cli脚手架并搭建一个简易项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

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

1、下载node。

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

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端
安装完成后,打开终端,输入

node -v
npm -v

如下图所示,输出本电脑的安装node和npm的版本号,即可安装成功。
mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

2、下载vue cli 脚手架

继续在终端输入

sudo npm install -g @vue/cli

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

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

tips:意外情况一

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

sudo npm install -g npm@9.8.1

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

tips:意外情况二

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

sudo npm install -g @vue/cli

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端
最后在终端输入 vue -V 即可查看是否安装成功。
mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

tips:意外情况三

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

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

解决办法:
第一步:输入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

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端
最后重新在终端输入 vue -V ,会显示版本号为安装成功。

3、创建项目

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

sudo  vue create 项目名

输入Y
然后根据项目是vue2.0还是vue3.0选择一个往下进行。
mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端
mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端
创建项目成功。
mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端
mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

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

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

mac下安装vue cli脚手架并搭建一个简易项目,macos,vue.js,前端

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

参考资料:

vue官网:https://cn.vuejs.org/guide/introduction.html
node官网:https://nodejs.org/en文章来源地址https://www.toymoban.com/news/detail-615067.html

到了这里,关于mac下安装vue cli脚手架并搭建一个简易项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-cli5脚手架搭建项目过程详解 -vue组件单元测试

    单元测试是对软件中的最小可测试单元进行测试。(最小可测试单元是要有结果产出的。例如某个方法,单独的某个操作) 单元测试其实是伴随着敏捷开发,它是对更快开发的一种追求。早发现错误比晚发现错误会更好,保证自己的代码符合要求 一: 搭建基于 jest 的 vue 单元

    2023年04月14日
    浏览(40)
  • 使用npm install -g @vue/cli 命令安装最新的脚手架与Vue版本不匹配的问题

    使用npm install -g @vue/cli 命令安装最新的脚手架 创建项目时不要选择Vue版本,让它默认选择(默认选择 Vue2)否则会出现 vue版本和脚手架版本vue-cli 不兼容的问题(怪哉) 脚手架兼容vue2 不兼容vue3 ? 不理解,记录一下,后续整理 Vue-cli版本 vue 版本 创建项目时 ,选择默认不要

    2024年02月12日
    浏览(40)
  • Vue-cli脚手架的下载

    vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及其基础代码,好比创建Maven项目时可以选择创建一个骨架项目, 主要的功能: 统一的目录结构、本地调试、热部署、单元测试、集成打包上线 Node.js : 下载 | Node.js 中文网 CTRL + window 输入

    2024年02月07日
    浏览(44)
  • vue 脚手架新手入门(vue cli 3)

    “:” 是指令 “v-bind”的缩写。用来绑定数据 @”是指令“v-on”的缩写。用来监听,并调用方法 下面是绑定class属性的数值。 监听点击动作 1.1、v-model 双向绑定 双向绑定 上面的操作等于 v-model 会将被绑定的值与 的值自动同步,这样我们就不必再使用事件处理函数了。 v-mo

    2024年02月09日
    浏览(29)
  • 20230623----重返学习-vue-cli脚手架

    Vue工程化处理工具之 : @vue/cli 脚手架的本质:基于webpack实现项目的打包部署; vue/cli 安装和使用 可选择当前配置项 文件地址在:C:Users当前电脑用户名.vuerc。 如:C:Usersfangc.vuerc 文件目录 package.json 目录: scripts:npm可执行命令 serve命令: vue-cli-service 是Vue脚手架内部封装的

    2024年02月10日
    浏览(37)
  • 17-工程化开发 & 脚手架 Vue CLI

    1.核心包传统开发模式: 基于 html/css /js 文件,直接引入核心包,开发 Vue。 2. 工程化开发模式: 基于构建工具 (例如: webpack)的环境中开发 Vue。    问题:         1. webpack 配置不简单         2. 雷同的基础配置         3. 缺乏统一标准 需要一个工具,生成标准化的配置 基本介

    2024年02月11日
    浏览(40)
  • 使用vue-cli脚手架创建vue项目

    0.vue cli安装 vue cli2安装 vue cli2卸载 vue cli3安装 key通过命令查看当前安装的vue cli的版本 1. vue init vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目 webpack是官方推荐的标准模板名。 vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的

    2024年02月11日
    浏览(45)
  • Vue2学习之第三章——Vue CLI脚手架

    文档:https://cli.vuejs.org/zh/ 具体步骤 第一步(仅第一次执行):全局安装@vue/cli。 npm install -g @vue/cli 第二步:切换到你要创建项目的目录,然后使用命令创建项目 vue create xxxx 第三步:启动项目 npm run serve 备注: 如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry https:/

    2024年01月19日
    浏览(37)
  • 关于基于vue-cli脚手架创建vue项目(图文版)

    目录 一.vue-cli脚手架·概述(来源于官方文档) 二.创建流程 2.1 首先安装node.js,如未安装请移步到:安装node.js 2.2 安装脚手架vue-cli 2.2.1 使用npm install -g @vue/cli命令  2.2.1 使用vue -V 查看版本并检验是否安装成功  2.3 安装vue项目 2.3.1 使用命令 vue create 项目名 ​编辑 2.3.2 这里

    2024年02月07日
    浏览(44)
  • vue-cli 脚手架创建uniapp项目(微信小程序)

    1、全局安装 vue-cli 脚手架(不建议用 5.0 版本,避免报错) 2、脚手架创建项目 3、选择 默认模板 即可 4、编译并启动项目  5、开发者工具,导入项目,注意路径 \\\"项目地址/dist/dev/mp-weixin\\\" 开发的规范 不能直接在开发者工具中修改代码,口诀:vscode做开发,开发者工具做调试

    2024年02月09日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包