vue cli 安装配置,以及报错处理

一、环境准备
1、首先我们先要安装node.js,我的是win10 系统

我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境啦。
在这里插入图片描述
查看是否安装成功,如果能够正常打印出版本就说明安装成功了
在这里插入图片描述
二、接下来我们开始安装vue

# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm install --g vue-cli

启动vue客户端界面

# 打开vue的可视化管理工具界面
vue ui

这时你可能发现输入 vue ui 命令可能没有什么作用

这是你需要查看一下vue 的版本,版本小于3.0是不会起作用的

vue -V

查看是否有 ui 功能

vue -h

在这里插入图片描述
解决办法

卸载旧版本,安装新的版本

npm uninstall vue-cli -g
或
cnpm uninstall vue-cli -g(推荐,国内镜像,会快些)

安装新版本

npm install @vue/cli -g
或
cnpm install @vue/cli -g(推荐,国内镜像,会快些)

这里说明一下,为什么安装了又要卸载掉重新装,一步到位它不香么。其实是考虑到已经装过低版本的朋友。

现在输入 vue ui 就可以运行起来啦,但是你还有可能会遇到一个更加不好解决的问题
上图
在这里插入图片描述
看到这个问题我也是很无奈呀,哎哎哎。。。
然后就是一通百度
百度上解决方案就是(基本全是,希望你想信,不要花打把时间去百度了,我已经帮你百度过来,花了我不少的时间,只要认真按照要求去做应该都是可以运行起来的。

https://blog.youkuaiyun.com/fyshk/article/details/79710313

我的时间基本都是花在最后文章说的最后一步,应为我看我的
在这里插入图片描述
这些都有(2012是我后面安装的,也就是我解决问题的关键。你的可能不一定)所以就拼命的百度。写这篇文章,就是希望你不要像一样。

安装 Microsoft Visual C++ 20XX(运行库)(XX表示:05、08、10,12)没有安装包其实一点都不要慌,
百度一下就ok在这里插入图片描述
在这里插入图片描述
随便点一个下载就行,可能它会是一个下载器,会给你下载一下其他的东西,没关系只要能解决问题。我们手动删一下就行。

可以参考以下文章,可能会帮助你更快的解决问题
http://www.coozhi.com/youxishuma/diannao/11989.html
http://xinzhi.wenda.so.com/a/1524452270616517

五、参考文章
https://www.markerhub.com/project/97 (vue 安装)

在这里插入图片描述
https://blog.youkuaiyun.com/qq_43571415/article/details/103781460 (vue ui 没反应)

### Vue CLI 安装后运行时常见错误及解决方案 #### 错误一:JavaScript 堆内存不足 当执行 `npm run dev` 时遇到 `FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory` 的致命错误,这通常是因为 Node.js 进程分配给 V8 引擎的堆内存量不足以处理大型项目的编译和构建过程。 为了增加可用的堆大小,可以在启动开发服务器之前设置环境变量 NODE_OPTIONS 来指定更大的最大旧生代空间尺寸: ```bash export NODE_OPTIONS="--max_old_space_size=4096" ``` 此命令会将最大可使用的内存提升到 4GB[^1]。对于 Windows 用户,则应通过 PowerShell 或者 CMD 使用 setx 设置永久性的系统级环境变量。 #### 错误二:Vue CLI 版本未显示 如果全局安装vue-cli 工具包之后尝试查看其版本号却得不到任何响应或者提示找不到命令,可能的原因是没有成功添加至 PATH 路径中或者是缓存问题引起的。 可以先清除 npm 缓存并重新安装工具包: ```bash npm cache clean --force npm install -g @vue/cli ``` 接着验证是否能够正常调用该指令以及获取正确的版本信息: ```bash vue --version ``` 确保以上操作均返回预期的结果后再继续其他步骤[^3]。 #### 错误三:项目依赖项缺失或损坏 有时即使完成了上述两项检查仍然无法顺利启动应用,这时应该回到项目根目录下确认所有必要的模块都被正确下载下来了。可以通过删除 node_modules 文件夹连同 package-lock.json 一起移除现有锁文件,然后再次执行安装流程来修复潜在的问题: ```bash rm -rf node_modules/ rm package-lock.json npm install ``` 这样做有助于排除因本地库状态不一致而导致的各种异常情况[^2]。 #### 错误四:端口被占用 默认情况下,Vue CLI 创建的应用程序会在 localhost 上监听 8080 端口提供服务。然而如果有其它进程正在使用这个端口号的话就会造成冲突进而阻止应用程序完全加载完毕。此时可以根据实际情况调整配置文件中的 port 属性值或是直接修改启动参数以改变目标地址。 例如,在 package.json 中找到 scripts 字段下的 dev 部分加入自定义选项: ```json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --port 8081", } ``` 这样就可以让 Webpack Dev Server 改变成另一个空闲端口工作了[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值