windows下的VUE开发环境安装与搭建

一、安装node.js

官网：https://nodejs.org/en/download/

历史版本：https://nodejs.org/en/download/releases/

win7的系统下如果安装时出现以下情况：

可以在在官网的历史库（https://nodejs.org/dist/）下载node-v13.9.0-x64及之前的版本,经过测试是可以在win7上安装。

下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。

二、设置nodejs prefix（全局）和cache（缓存）路径

1、在nodejs安装路径下，新建node_global和node_cache两个文件夹

2、设置缓存文件夹

npm config set cache "D:\vueProject\nodejs\node_cache"

　设置全局模块存放路径

npm config set prefix "D:\vueProject\nodejs\node_global"

设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

三、基于 Node.js 安装cnpm（淘宝镜像）

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

1、输入cnpm -v ，检测是否正常，但是这里会报错。
2、添加系统变量path的内容
因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。
如图，修改系统变量path：

然后再次输入cnpm -v ，结果如下：

四、安装Vue

cnpm install vue -g

五、安装vue命令行工具，即vue-cli 脚手架

cnpm install -g @vue/cli

六、查看npm的安装版本

npm -v

七、安装webpack

cnpm install -g webpack

八、启动:vue ui，并创建Vue项目

vue ui

九、使用命令行创建Vue项目

vue init webpack vue_test1

如果执行以上命令的过程中报如下错误，说明vue 的客户端没有安装好。

可以执行如下命令进行安装

npm i -g @vue/cli-init