vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一）

vue入门之路篇系列教程：
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）

这几年前端发生了日新月异的变化，各种框架层出不穷，满目琳琅，本人由于工作需要开始了深入的接触其中的一个框架—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教程 - 廖雪峰的官方网站

提示：后面还有精彩敬请期待，请大家关注我的CSDN博文：侬姝沁儿，或者我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。