vue搭建详解

1、Vue推荐开发环境
Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016

2、安装环境

2.1、安装nodejs
去nodejs官网下载即可，地址：http://nodejs.cn/中文网。

安装完以后，打开命令行（Windows+R）快捷键打开cmd窗口，输入 node -v ，如果出现版本号，那就安装成功！

2.2、安装vue淘宝镜像
1、打开cmd命令框，输入：

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

注意，安装镜像的时候会有大约1-2分钟的事件，而且要保持网络通畅，要耐心等待。
出现下图，表示成功

2、然后在命令框输入 cnpm install vue ，这也需要一点点的时间，当出现下图表示安装成功了。

3、如果这两步没有异常就是整个vue的环境搭建成功了，如果不成功，请重复上述操作。

4、搭建vue-cli

5、安装webpack
1、打开命令行工具输入：

npm install webpack -g

如果成功 输入 webpack -v 会提示版本信息

2、在cmd命令框输入

cnpm install -g vue-cli

3、然后在命令行键入

vue init webpack 项目名称

会有一些初始化的设置，如下输入:
Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 直接回车默认或是输入
Use ESLint to lint your code? n （初学者建议选中no）
pick an eslint preset. 默认Standard
setup unit tests with karma + mocha?No(单元测试不需要)
setup e2e tests with Nightwatch?No(单元测试不需要)

6、进入项目

cd 命令进入创建的工程目录，首先cd 自己建工程的名字；

安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。

启动项目，输入：npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”。