更新：由于vue-cli已经出到3.X，如下的内容仅仅是为了vue-cli2.x所写，如果您使用的是vue-cli3.X，请移步：vue最简单的入门教程+实战（vue-cli3.X）
推荐我的vue教程：VUE系列教程目录
这几年前端发生了日新月异的变化，各种框架层出不穷，满目琳琅，本人由于工作需要开始了深入的接触其中的一个框架---VUE，由于框架是基于前端最基础的东西的升华，所以在掌握各种框架前，个人希望还是有诸如CSS，HTML5，JS这些基础的中级前端知识。顺带提一句我本人是在linux环境下，使用atom编辑器进行开发的，所以这里我也已这种环境作为教程环境。同时采用
Vue2+VueRouter2+webpack方式来构建项目实战。
一、VUE简介
既然提到VUE大家一定很疑问VUE到底是个什么框架？它可以干什么？
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 是用于构建交互式的 Web 界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
Vue.js 特点
- 简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
- 数据驱动： 自动追踪依赖的模板表达式和计算属性。
- 组件化： 用解耦、可复用的组件来构造界面。
- 轻量： ~24kb min+gzip，无依赖。
- 快速： 精确有效的异步批量 DOM 更新。
- 模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。
如果你喜欢下面这些，那你一定会喜欢 Vue.js：
- 可扩展的数据绑定机制
- 原生对象即模型
- 简洁明了的 API
- 组件化 UI 构建
- 多个轻量库搭配使用
二、入题
扯了一些官方的简介废话，大家还是有点懵，对于新手来说，这样的叙述简直不能理解，本人倾向与“需求产生疑问，疑问产生答案”的教程方式。
于是需求来了，我们要用VUE框架，VUE框架有什么附带环境呢？VUE还需要与其他什么东西合起来开发吗？或者说成VUE+什么。
VUE在日常开发中需要nodejs+npm环境，就是你先要安装npm。如果你有使用过node，并安装过npm，可以跳过这一步。详情参考：nodejs
安装好nodejs之后，在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来，就说明，npm也已经安装好了。
同时本人在开发中采用Vue2+VueRouter2+webpack构建项目，如果你是新手可以不需要知道webpack是什么，有兴趣可以自己查查，这里只是简要说明是使用什么构建项目的。
为了在学习过程中便于查找资料，一定要准备好翻墙工具，至于怎么翻墙我就不说了。
声明:以下内容有些地方参考了我师傅的博客，大家可以去这里查看详情：Vue2+VueRouter2+webpack 构建项目实战
三、vue-cil构建项目
vue-cil构建项目：官网的介绍
vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。我们不需要知道它究竟是什么，只需要知道它是一个工具帮助我们辅助开发，而我们所要做的就是安装上它，来方便我们的开发。
下面，我们来用vue-cil构建一个项目。
首先，我们在终端中把当前目录定位到你准备存放项目的地方。即自己定义的一个目录下面，这里我的定位目录的命令如下：
$ cd ~/project/MyWork
定位后，我们打开VUE官网的安装，下拉到命令行工具，如下图：
我们首先需要安装vue-cil。我们照着官网的命令行直接在命令端口输入命令就行，细节如下：（linux和window通用）
npm install -g vue-cli 或者官网的： $ npm install --global vue-cli
这个命令是全局安装vue-cli的意思，只需要运行一次就可以了。安装上之后，以后就不用安装了。
webpack初始化你的项目：
$ vue init webpack vuedemo(你的项目名)
输入这个命令之后，会出现一些提示，以及询问，如下：(再次声明我的系统是linux)
你大可以一路按回车即可。
之后，再定位到你新建的项目名：
$ cd vuedemo
安装依赖：
$ npm install (说明： 安装)
执行npm install需要一点时间，因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管，等着就是了。如果长时间没有响应，就ctrl+c停止掉，然后再执行一次即可。如果还是照样，建议检查是不是因为没有翻墙的原因，或者，把npm源换成国内，一般是换成淘宝的，如下：
npm install -g cnpm --registry=http://registry.npm.taobao.org
安装完成后，终端如图：
最后，执行下面一句，把项目跑起来，走你：
$ npm run dev (说明： 运行)
执行后，终端如图：
如上：四行命令，就可以把一个名为vuedemo的项目跑起来。当然，这个名字你是可以随便起的，根据你的实际项目来定。
好，通过上面的这些命令，我们就实现了新建一个vue+webpack的项目。在运行了npm run dev之后，会自动打开一个浏览器窗口，就可以看到实际的效果了。
至此，我们运行并跑起来了VUE的默认项目。
小结：
我是强烈建议学习前端的同学整Linux学习。如果你又不用linux，那么没办法了，可以使用windows。但是windows下面的cmd工具，不得不说确实对于开发来说并不好使用，如果你一定要用，我也建议大家在windows上一定安装一款分布式版本控制系统软件：
Git。只要有这个，在任意文件夹右击菜单，在菜单中点击git bash here 菜单，然后可以打开一个类似于终端的面板，这里支持一些linux的常用的命令，包括vim工具都有。虽然界面是丑了点，但是比cmd要好用。
末了附上对师傅的敬意和git学习网站（虽说我觉得没用）：Git教程 - 廖雪峰的官方网站
提示：在最近几天我会慢慢附上VUE系列教程的其他后续篇幅，后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。
