第三章Mac系统下安装Vue-cli详细步骤

本文详细介绍如何在Mac系统上安装Vue-cli并配置项目。包括安装Node.js、全局安装Vue-cli、创建项目模板等步骤。

第三章Vue-cli安装

因为是mac系统,所以和视频里老师讲的有些许不同。
1.首先打开终端
这里写图片描述
按照老师的操作,首先检查node版本
下面是我的操作
打开终端,输入命令 node -v 我去,找不到node。。。。。
好吧,去这个地方下载mac版本的node
下载地址:https://nodejs.org/en/download/ (选择mac os)
安装完毕,有了
这里写图片描述

2.输入 sudo npm install -g vue-cli 这个命令

因为npm的关系所以有点进度有点慢,等待,终于好了
这里写图片描述

3.输入 命令 vue 查看一下
这里写图片描述

执行 vue list 查看
这里写图片描述
这些是列出了可以用的模板

4.安装webpack模板,并设置工程信息
输入命令 vue init webpack sell
注释:sell是名称,自己可以随意命名

接下来输入项目名称,项目描述,作者,是否安装路由,是否使用后ES检测器,输入 y,需要,是否需要前端测试库n 不需要,完成。
这里写图片描述

然后输入命令cd sell

输入命令sudo npm install
这里写图片描述

输入命令sudo npm run dev
这里写图片描述
以上!!mac系统安装Vue-cli完成!

<think>嗯,用户提到vue-cli安装一直都是2.9.6,该怎么解决。首先我得想,为什么会一直安装旧版本呢?可能用户之前全局安装过旧版的vue-cli,导致每次安装都默认使用那个版本。Vue CLI的版本确实有更新,现在应该已经到4或5了吧。 首先,我需要确认用户是否真的安装的是旧版。用户可能执行了`vue -V`,看到版本是2.9.6。那可能是因为他们全局安装vue-cli的旧版本,而Vue 3之后官方推荐使用@vue/cli,也就是版本3以上的。所以旧版的包名是vue-cli,而新版的是@vue/cli。 接下来,我应该指导用户先卸载旧版本的全局安装。使用`npm uninstall -g vue-cli`或者如果使用yarn的话是`yarn global remove vue-cli`。但有时候可能因为权限问题,需要加上sudo,尤其是在Linux或Mac上。不过要注意,用户如果是在Windows下,可能不需要sudo。 然后,安装新版本的@vue/cli。这里要确保用户使用正确的包名,也就是`npm install -g @vue/cli`或者yarn的命令。安装完成后,再次检查版本,应该就能看到最新的了。如果安装后还是旧版本,那可能路径有问题,比如旧的vue命令还在PATH中,这时候需要检查npm的全局安装路径是否正确,或者是否有残留的旧版本文件。 另外,可能用户之前通过其他方式安装过,比如用cnpm或者pnpm,这时候可能需要用对应的包管理器来卸载和安装。或者系统中存在多个node版本,导致全局包的位置不同,需要确认当前使用的node版本是否正确。 还有,用户可能没有正确卸载旧版本,或者存在缓存,这时候可能需要清除npm缓存,或者手动删除残留的文件。不过这种情况相对少见,但可以作为备选步骤。 最后,确认用户安装成功之后,建议他们尝试创建一个新项目,使用`vue create project-name`,这样能验证新版本的cli是否正常工作。如果遇到权限问题,可能需要调整目录权限或者使用管理员权限执行命令。 总之,解决步骤应该是先卸载旧版,再安装新版,处理可能的路径或权限问题,最后验证安装结果。同时,提醒用户注意包名从vue-cli变为@vue/cli,这也是常见的容易出错的地方。</think>根据Vue CLI的版本迭代规律,2.9.6属于旧版脚手架工具。以下是逐步解决方案: ### 第一步:卸载旧版本 ```bash # 使用npm卸载 npm uninstall -g vue-cli # 如果使用yarn yarn global remove vue-cli # Linux/Mac可能需要sudo权限 sudo npm uninstall -g vue-cli ``` ### 第二步:安装新版Vue CLI ```bash # 使用npm安装 npm install -g @vue/cli # 使用yarn安装 yarn global add @vue/cli # 验证安装(注意V大写) vue --version # 应输出类似 @vue/cli 5.0.8 ``` ### 常见问题排查 1. **路径冲突** ```bash # 检查全局node_modules路径 npm root -g # 确认该路径在系统环境变量中 ``` 2. **残留文件清理** ```bash # 手动删除旧版残留(Mac/Linux示例) rm -rf /usr/local/bin/vue rm -rf /usr/local/lib/node_modules/vue-cli ``` 3. **缓存问题** ```bash npm cache clean --force ``` ### 版本对照表 | 包名 | 版本范围 | 支持状态 | |--------------|------------|---------------| | vue-cli | 2.x | 已废弃 | | @vue/cli | 3.x-5.x | 官方维护 | ### 项目迁移建议 若已有基于2.x的项目: ```bash # 在项目根目录执行 vue upgrade ``` 该命令会自动检测旧项目配置并引导升级 > **注意**:Vue CLI 3+ 使用`vue create`命令创建项目,取代了旧版的`vue init`工作流。新版默认集成Webpack 5、ESLint 8等现代工具链。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值