怎样在windows系统使用vue-cli搭建一个简单的项目(同时解决了问题:‘vue‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。)

先说几句废话。。。可能会有人和我经历一样。

要确保已经安装了node和npm。
可以执行命令node -vnpm -v。看看这两个是否存在。
确认存在以后执行npm install vue-cli -g ,显示安装成功了但是执行vue list,提示’vue’ 不是内部或外部命令,也不是可运行的程序。
经过网上一番查找一番改系统环境变量,最后还是不成功,最后决定,把node和vs Code卸载重新装(因为这两个在安装的时候都会自动更改环境变量,但是这个时候我已经把环境变量改乱了。)

步入正题
1.安装node.js(https://nodejs.org/en/
我把它安装到了D盘,中间过程除了更改安装路径一直点下一步就可以了。
安装成功以后,新建了两个文件夹node_global和node_cache
在这里插入图片描述
2.接下来要设置npm的缓存文件夹

npm config set cache "D:\node\node_cache"

设置npm全局模块存放路径

npm config set prefix "D:\node\node_global"

这里设置成功以后,再执行npm install *** -g下载安装的模块都会存在这个路径的文件夹下。
3.安装cnpm(淘宝镜像)
用这个下载简直是飞一般的感觉。。不过有的时候会出现下载模块显示成功了,但是在文件夹里没有找到的情况,这个时候再用npm试一下就好了。

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.设置环境变量
一开始看到设置环境变量真的很头疼。。老天爷。。
公司电脑系统时win7这里以这个为例。
右键计算机–>属性–>高级系统设置–>环境变量,在系统变量里找到Path
在这里插入图片描述
不要修改已有的,在后面添加;D:\node\node_global
我的理解是,把npm安装模块的路径放在系统变量里的Path路径下,等于放在了一个公共使用区域,只要是在这台电脑上,谁都可以任意使用这个文件夹里安装的东西,比如本例子中cnpm,vue这些命令。

接下来还要新增系统变量NODE_PATH
在这里插入图片描述
这里就直接换成自己的node的安装路径+\node_modules就好了。

5.安装vue

cnpm install vue -g

在这里插入图片描述
6.安装脚手架vue-cli

cnpm install vue-cli -g

在这里插入图片描述
试下有没有安装成功

vue list

在这里插入图片描述
终于不提示’vue’ 不是内部或外部命令,也不是可运行的程序了!!!

接下来新建个项目吧

vue init webpack vuemall

在这里插入图片描述
这里一些问题自己填写就可以了。不填一路回车好像也没什么大事。
完成以后就可以看到项目文件目录结构啦
在这里插入图片描述
然后再根据黄色提示,先进入自己创建的文件夹 cd 文件夹名字,再启动程序就可以了,npm run dev
在这里插入图片描述

启动成功在这里插入图片描述
打开链接
在这里插入图片描述
参考网址https://www.cnblogs.com/zhaomeizi/p/8483597.html
太太太太太太感谢这位作者的文章了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值