vue在window安装教程

遇到各路坑货的安装教程之后我终于成功安装了，接下来分享一下如何在window下安装吧！先说一下大概思路：Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。然后nodejs里面自带有npm了，待会可以通过npm安装一些命令行工具。最后因为涉及到一些文件权限的问题，使用cmd时应该使用管理员身份打开。 
一、安装nodejs 
下载地址：https://nodejs.org/en/download/ 
选择对应版本的下载。然后傻瓜式一步安装到底。比如我的安装后目录为 
E:\Program Files\nodejs 
然后用在cmd 下输入：node -v 查看是否安装成功。 
 
如果不行就检查一下环境变量中path有没有nodejs的安装路径。如果没有就手动添加。

二、查看npm版本 
在cmd下输入命令：npm -v 
 
如果低于3.0版本需要进行升级(一般nodejs自带的npm的版本都太低，我在第一次运行的时候就被告知版本太低无法运行) 
升级方法： 
在cmd命令下cd到nodejs安装目录，然后输入以下命令：npm update npm 
这里要等待一下。更新完成后再使用：npm -v检查一下版本

三、cnpm的安装 
cnpm是淘宝的一个镜像，安装之后可以使用cnpm安装命令工具，安装速度会加快。 
直接使用npm install -g cnpm –registry=https://registry.npm.taobao.org 
命令安装即可。

四、安装vue-cli 
vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 
安装命令为：cnpm install -g vue-cli，回车，等待安装。 
安装完后，检查是否安装成功，输入vue -v，出现以下版本信息： 
 
五、新建一个Vue项目 
1、新建一个文件夹vueJs用于存放项目，比如我的路径为E:\vueJs\ 
2、cd到此文件夹，输入:vue init webpack vue-demo 
按照以下设置： 
 
完成后查看E:\vueJs\vue-demo目录下会有以下文件(除了node_modules) 
 
3、安装项目依赖的包 
cd到vue-demo 文件夹，执行cnmp install，安装依赖包，安装完成之后，项目目录下多了node_modules

六、运行项目 
在命令行里输入 cnpm run dev，执行完成后启动项目，浏览器出现以下接结果 
 
如果出现这个界面说明就已经成功了。vue.js默认绑定8080端口，所以有8080端口被占用会有冲突。 
修改vue.js的默认端口可以参考http://blog.csdn.net/liyuxing6639801/article/details/60325558 
（我是修改了本机的8080端口了。）

好了。大功告成了。期待下一篇vue.js经验分享吧！