遇到各路坑货的安装教程之后我终于成功安装了,接下来分享一下如何在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经验分享吧!