介绍脚手架
现在的开发模式一般是工程化开发方式,即在webpack环境中开发vue。
脚手架在代码里面体现:一套固定标准文件夹+文件+webpack配置代码
脚手架的好处:开箱即用,webpcak已经配置好
全局安装@vue/cli 模块包
安装
yarn global add @vue/cli
查看是否成功
vue -V // 这里是大写的 V
这里是已经成功 ↓ ↓ ↓
安装脚手架可能出现的问题
问题描述:‘vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件
截图:
原因:系统不认识vue命令,所以出现该错误
解决方案:配置环境变量
如果是你window10的系统,找到此电脑,右键点击,接着点击属性
记得全屏打开
如果是专业版,直接点右边的高级系统设置
如果是家庭版,左上角有个搜索框,去搜索
点击高级系统设置之后可以看到一个框框,点击环境变量
环境变量点开,在下面系统变量可以看到变量 path,点击编辑
注意:path可以添加,一定不要乱修改之前的,每个人的path是不一样的,所以一定不要乱修改
然后查看是否有这个配置
如果没有的话,就是没有配置环境变量,肯定会报错
接下来解决问题,在黑窗口( windows+r 打开黑窗口),执行命令查看
yarn global bin // 可以查看yarn全局包的
然后复制路径打开对应的文件夹
接下来我们要告诉我们的系统,全局包所安装的目录。还是老位置,打开环境变量 ,编辑path,新建一个变量,把黑窗口yarn全局包所在的目录复制进去
点击确定,问题就解决啦(记得保存哦)
然后在黑窗口在执行下 vue -V 检查一下能否查到当前的版本号 是否解决问题
我写这么详细,不会你打死我🤣🤣🤣
补充
如果有其它的情况(有可能是网速的问题),先使用ctrl+c ,停止下载vue-cli全局包
然后再去执行 yarn global add @vue/cli
有点耐心点
这是我一般会遇到的问题,大家如果出现别的情况,可以一起讨论
感谢观看!