Vue2（七）：超详细vue开发环境搭建（win7），nodejs下载与安装，安装淘宝镜像（报错已解决），配置脚手架

一、安装node.js

本来想粗略写一下的，但是搭建脚手架的时候，遇到了很多问题，浪费快两天时间，记录一下自己的解决办法希望对你们有帮助！

1.下载nodejs

安装包下载链接【CNPM Binaries Mirror】

下载我划线的这个：

2.安装nodejs

下载好之后，双击安装，点击next，到安装到哪个目录的时候，最好安装到自己指定的文件夹中。

安装完成后，在cmd命令窗口（win+R按下回车显示出cmd命令窗口）输入以下命令查看安装版本情况

【node -v】查看安装的node版本

【npm -v】查看安装的npm版本，node 安装好默认npm也被安装了

3.nodejs环境配置

（1）在你安装nodejs文件夹目录下，新建两个文件夹：

分别是：node_cache和node_global

（2）创建完两个空文件夹之后，打开cmd命令窗口，输入

复制代码

npm config set prefix "D:\program\node\node_global"
npm config set cache "D:\program\node\node_cache"

（3）关闭cmd窗口，【我的电脑】-右键-【属性】-【高级系统设置】-【高级】-【环境变量】

新建【系统变量】，变量名为NODE_PATH，变量值为node_modules所在路径。
我的路径是：E:\APP\nodejs\node_modules
将【用户变量】下的【Path】修改为node_global所在路径。
我的是E:\APP\nodejs\node_global

二、基于node.js安装cnpm（淘宝镜像）

1.以管理员身份运行cmd，输入淘宝镜像

复制代码

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

2.解决cnpm报错:The operation was rejected by your operating system

但是我发现我的一直报错，报错内容如下，如未报错，请跳过此步骤：

解决办法：

将这句命令

复制代码

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

改为指定版本,重新以管理员身份打开cmd，运行即可

复制代码

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

过程可能很慢，如果卡住，按下回车即可

三、安装Vue

复制代码

cnpm install vue -g

四、安装脚手架vue-cli

复制代码

cnpm install vue-cli -g

五、项目创建

可以创建指定文件夹，在这下面创建你的项目，比如我的就是创建了一个vue_test文件夹，然后：

在这个文件夹路径前面输入cmd+空格回车，就可以在这个路径下面创建你的项目了

1、在cmd命令窗口输入

复制代码

vue init webpack （项目名称）testone

稍微等一会，结果如下：

出现这样的结果后可以发现你的文件夹下面自动生成了一个testone文件夹：

2、切换到刚刚创建的目录下

继续在刚刚的cmd窗口输入：

复制代码

cd testone（你的项目名称）

此时就完成切换了：

六、项目运行

在刚刚的目录下面，输入：

复制代码

npm run dev

张天禹老师输入的是npm run serve，但是我发现我输入之后报错，后来用上面提示的这个就OK了

之后就加载一大堆，但是出现这个端口号就OK了

这个网址打开后就是这样的页面：

如果还有什么问题，可以在评论区下面交流