手把手教你在Windows下搭建Vue开发环境

一、下载Note.js

下载地址：https://nodejs.org/zh-cn/download

 二、点击安装包无脑下一步即可（建议修改下路径）

三、在选择的安装路径下创建两个文件夹node_cache和node_global

 四、打开CMD，设置缓存路径和全局模块存放路径

　　4.1 缓存路径

　　npm config set cache "D:\Software_installation\nodeJS\node_cache"

　　4.2 全局模块存放路径

　　npm config set prefix "D:\Software_installation\nodeJS\node_global"

五、安装使用淘宝的cnpm命令行工具替代默认的npm（CMD使用管理员方式运行，不然可能会报错）

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

打开cmd执行以下命令检查是否安装成功，如果出现如下信息，说明安装成功了

 

 备注：

也可以将镜像源修改为淘宝镜像

查看当前镜像源：npm get registry

默认镜像源为：https://registry.npmjs.org/

将当前镜像源修改为国内淘宝镜像npm config set registry https://registry.npm.taobao.org

六、设置环境变量

　　6.1 打开电脑环境变量的Path，添加刚刚新建的node_global文件夹的位置

       

 　　6.2 新建环境变量NODE_PATH，配置变量值为nodejs安装目录下的node_modules文件夹目录路径

       

 七、安装vue

　　如果之前打开了命令行窗口，需要先关闭

　　重新运行cmd，进入终端命令行模式

　　cnpm install vue -g

 八、安装Vue-cli脚手架

　　cnpm install -g vue-cli

 备注：如果需要安装3.x版本，将vue-cli改为@vue/cli即可

安装之前先卸载旧版本 npm uninstall -g @vue/cli
安装3.0及其以后版本 npm install -g @vue/cli@x.x.x
安装3.0以前的旧版本 npm install -g vue-cli@2.x

验证VUE是否安装成功

vue -V

 END

点赞、关注支持，我会不断更新各种干货！