Vue 环境搭建详细教程（Window下）+ Vue模版下载

        我是android出生，想朝全栈方向走走；最近写了个SpringBoot项目，后端API已经完成，前端部分完成；但是前后端融合到一个Project中，于是就用Vue将前后端分离；

        由于没做好前期查询搭建配置vue环境的工作，借鉴了一个写的不是很全的博客的流程安装下去，出现配置环境变量总是 “vue不是内部或外部命令···” ，于是卸载了之前安装的node.js及删除其他配置环境，重新搭建环境并且找到配置环境变量失败的原因；

     建议初次使用一些工具或框架的小伙伴，使用前多看几篇博客，规避有些博客内容不全而导致出现各种奇葩问题待解决；

 

Vue环境搭建说明

1.vue需要依赖于node环境。所以配置vue之前得搭建好node环境；

2.由于许多npm包都是在国外及网络限制原因，故此需要通过淘宝的镜像服务器，将npm切换成cnpm；

 

Vue环境搭建流程详解

一： node.js 下载安装；官网地址：https://nodejs.org/en/download/

1>根据自己的情况选择版本；我这里是window 64位；下载完成，直接双击进入安装，同意接受协议 安装；我这儿安装在 D:\Program Files下，然后下一步、下一步就ok了。

注意：a>安装路径最好不要放到C盘中，除非你的C盘足够大，随着node.js和vue的缓存文件增多；C盘空间越来越小且卡；

           b>安装路径最好不要有空格，且必须是英文，程序猿的习惯；由于我试过Program Files的空格没有影响；

 

 

2> 安装完成，可以 键盘 win+R >>> cmd ,在cmd.exe命令窗口输入如下命令：

//1.查看node版本，若安装成功会输出版本；或者在提示node不是内部命令的情况下，重启一下电脑在执行以下命令，命令如下：
node --version

//2.查看npm版本，命令如下：
npm -v

//3.在node安装目录下（我的是D:\Program Files\nodejs）分别新建文件夹 node_global 和  node_cache  

//4.在npm转cnpm之前，修改全局安装路径，命令如下：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
说明：D:\Program Files\nodejs\node_global 为你的nodejs安装路径+新建文件夹名称

//5.安装淘宝的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

结果如下图：

 

二：环境变量配置

1. 计算机 >> 右击鼠标 >> 属性 >>　更改设置 >> 高级 >> 环境变量  >>系统变量下，选择 Path，然后编辑；

在尾部追加  ;D:\Program Files\nodejs\node_global    注意前面有英文分号(;)    然后确定！

测试环境变量是否配置成功；

//查看cnpm版本
cnpm -v

输出结果如下：

三：vue环境安装

//1.用cnpm安装vue命令
cnpm install vue -g

//2.安装vue命令行工具
cnpm install vue-cli -g

四：创建工程，下载Vue模版

1. 我用VS Code开发的，进入你的项目工作空间workspace下；我的是E盘WebProject；

//1.下载模版 aerial是我的项目名称；vue init webpack-simple + 你的项目名称   项目名称首字母不能为大写
vue init webpack-simple aerial 

执行后你的工作空间就存在了一个Project，执行结果如下图，

2.项目中安装vue

//1.进入项目
cd Aerial

//2.下载依赖
cnpm install

//3.启动项目
npm run dev

执行成功后，会自动打开 浏览器localhost:8080看到vue表示成功

 

、

 

 

后续就是开发VS code 编写代码了....  加油！！！！！