笔记:vue-cli全局安装,以及可能出现环境变量的问题

300 阅读2分钟

介绍脚手架

现在的开发模式一般是工程化开发方式,即在webpack环境中开发vue。

脚手架在代码里面体现:一套固定标准文件夹+文件+webpack配置代码

脚手架的好处:开箱即用,webpcak已经配置好

全局安装@vue/cli 模块包

安装

yarn global add @vue/cli

查看是否成功


vue  -V // 这里是大写的 V

这里是已经成功 ↓ ↓ ↓

Snipaste_2022-05-04_10-54-54.jpg

安装脚手架可能出现的问题

问题描述:‘vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件

截图:

Snipaste_2022-05-04_10-58-32.jpg

原因:系统不认识vue命令,所以出现该错误

解决方案:配置环境变量

如果是你window10的系统,找到此电脑,右键点击,接着点击属性

记得全屏打开

如果是专业版,直接点右边的高级系统设置

Snipaste_2022-05-04_11-16-49.jpg

如果是家庭版,左上角有个搜索框,去搜索

Snipaste_2022-05-04_11-18-22.jpg

点击高级系统设置之后可以看到一个框框,点击环境变量

Snipaste_2022-05-04_11-22-39.jpg

环境变量点开,在下面系统变量可以看到变量 path,点击编辑

注意:path可以添加,一定不要乱修改之前的,每个人的path是不一样的,所以一定不要乱修改

Snipaste_2022-05-04_11-33-55.jpg

然后查看是否有这个配置

Snipaste_2022-05-04_11-36-15.jpg

如果没有的话,就是没有配置环境变量,肯定会报错

接下来解决问题,在黑窗口( windows+r 打开黑窗口),执行命令查看

yarn global bin  // 可以查看yarn全局包的

Snipaste_2022-05-04_11-43-38.jpg

然后复制路径打开对应的文件夹

Snipaste_2022-05-04_11-45-11.jpg

接下来我们要告诉我们的系统,全局包所安装的目录。还是老位置,打开环境变量 ,编辑path,新建一个变量,把黑窗口yarn全局包所在的目录复制进去

Snipaste_2022-05-04_11-51-43.jpg

点击确定,问题就解决啦(记得保存哦)

然后在黑窗口在执行下 vue -V 检查一下能否查到当前的版本号 是否解决问题

我写这么详细,不会你打死我🤣🤣🤣

补充

如果有其它的情况(有可能是网速的问题),先使用ctrl+c ,停止下载vue-cli全局包

然后再去执行 yarn global add @vue/cli

有点耐心点

这是我一般会遇到的问题,大家如果出现别的情况,可以一起讨论

感谢观看!