vue-cli2.x旧版本卸载不掉的问题踩坑指南(附Vue脚手架安装教程)

 更新时间:2022年07月14日 09:43:59   作者:每天码到十二点  
遇到一个Vuecli2脚手架卸载不了的问题,查了许多资料说的都比较复杂,所以下面这篇文章主要给大家介绍了关于vue-cli2.x旧版本卸载不掉的问题踩坑的相关资料,文中还附了Vue脚手架安装教程,需要的朋友可以参考下

旧版本卸载

问题说明

vue2.x脚手架旧版本卸载不掉的问题:(卸载命令运行后输入vue --version仍一直显示旧版本)

问题解释

首先明确一点,卸载不掉肯定说明你的电脑中至少有两个地方存在脚手架,而你的卸载操作只是卸载了其中之一。而出现这个情况的原因,一般来说是你在npm的默认路径下安装过脚手架,在配置了npm全局安装路径之后又安装过脚手架,所以有两个脚手架。(顺带一提,这样的情况提示的都是默认安装路径下的vue脚手架版本)

问题解决

所以关键的问题就是去卸载npm默认安装路径下的vue脚手架,步骤如下

查看C:\Users\Administrator\AppData\Roaming\npm\node_modules下是否有vue-cli,@vue,删除它查看C:\Users\Administrator\AppData\Roaming\npm下是否有npm相关文件,删除(可参考下图我的回收站中的文件及他们的原地址)

重新查看vue版本,提示’vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件,此时可安装新版本。如果提示vue路径问题,表示第2步中你没删干净 脚手架安装

首先,确保已安装node.js,且已配置环境变量(我的nodejs环境变量E:\develop\node.js)

设置npm的默认全局安装路径和缓存路径,我的设置如下

  • npm config set prefix “E:\develop\node.js\node_global”
  • npm config set cache “E:\develop\node.js\node_cacle”

建议配置npm淘宝镜像,提高下载速度npm config set registry https://registry.com.taobao.org,如果忘记自己是否配置过,可通过npm config get registry查看

以管理员身份运行cmd,执行npm install -g @vue/cli(3.x版本及以上的脚手架)

有警告没事,不是你的问题

配置环境变量,也就是将第二步中的prefix路径添加到环境变量中(我这里即为E:\develop\node.js\node_global)

使用vue --verion命令查看是否安装成功新版本(注意要先关闭当前cmd窗口,重新打开)

现在可以创建vue脚手架了,cmd进入要创建项目的文件夹,执行vue create 项目名。

ps:最后一个问题,如果使用vue命令时提示你node版本太低,更新node版本就好了。

总结

到此这篇关于vue-cli2.x旧版本卸载不掉的问题踩坑的文章就介绍到这了,更多相关vue-cli2.x旧版本卸载不掉内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 项目分环境打包的方法示例

    Vue 项目分环境打包的方法示例

    这篇文章主要介绍了Vue 项目分环境打包的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue无后端配合实现导出功能的示例代码

    Vue无后端配合实现导出功能的示例代码

    这篇文章主要为大家详细介绍了Vue如何在无后端配合的情况下实现导出功能,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起了解一下
    2024-01-01
  • vue项目结构目录超详细介绍

    vue项目结构目录超详细介绍

    这篇文章主要给大家介绍了关于vue项目结构目录超详细介绍的相关资料,Vue项目目录结构是指在开发Vue项目时,为了更好地组织和管理代码,将不同的文件按照一定的规则和层次结构进行分类和存放的方式,需要的朋友可以参考下
    2023-12-12
  • Vue Input输入框自动获得焦点的有效方法

    Vue Input输入框自动获得焦点的有效方法

    我们有时候会遇到要输入框自动获取焦点的情况,下面这篇文章主要给大家介绍了关于Vue Input输入框自动获得焦点的简单方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue-element-admin开发教程(v4.0.0之后)

    vue-element-admin开发教程(v4.0.0之后)

    由于vue-element-admin的架构再4.0.0版本后做了重构,整体结构上和之前的还是很相似的,但是也有些变化,本文就介绍vue-element-admin开发教程(v4.0.0之后),感兴趣的可以了解一下
    2022-04-04
  • Vue查询数据并通过bootstarp table渲染数据

    Vue查询数据并通过bootstarp table渲染数据

    这篇文章主要为大家介绍了Vue查询数据并通过bootstarp table渲染数据,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • 使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法

    使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法

    这篇文章主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 通过实例解析chrome如何在mac环境中安装vue-devtools插件

    通过实例解析chrome如何在mac环境中安装vue-devtools插件

    这篇文章主要介绍了通过实例解析chrome如何在mac环境中安装vue-devtools插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    本篇文章主要介绍了详解vue-router2.0动态路由获取参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue调试工具没有Pinia模块的简单解决办法

    vue调试工具没有Pinia模块的简单解决办法

    Pinia是Vue的存储库,它允许您跨组件/页面共享状态,这篇文章主要给大家介绍了关于vue调试工具没有Pinia模块的简单解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-02-02

最新评论