Vue2.0饿了吗踩坑（一）

在学习Vuejs之前是先学习的Angularjs框架和React框架，都是前端比较火的MVVM框架，但是二者皆有优点，在进行前端开发中是不可或缺的，在去年，一个更火的前端框架Vuejs更是势不可挡，是一个轻量级的MVVM框架，借鉴了Angularjs的指令，和React的组件化，可以说是兼顾两者的优点，在项目过程中慢慢的喜欢上了这个前端框架，所有踩过的坑都是一种享受。刚开始接触前端框架的同学，Vuejs还是比较容易上手的，接触Vue的时候，是使用Vue-cli搭建的脚手架，视频中项目的讲师录视频的时间可能比较早，当时还没有接触到Vuejs，学习过程中搭建框架的时候是用的Vue2.0搭建的项目，废除、增加、修改了血多东西，这篇文章大概总结了有哪些变化，这就会在学习过程中遇到了各种各样的问题，再接下来的学习过程中会继续与大家分享。不说废话了直接上重点。

---

由于Vue-cli是基于node和npm安装和运行，没有的小伙伴可以百度下有很多教程的哟!

打开CMD全局安装Vue-cli

    $ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

    $ vue init webpack demo   //demo 是搭建项目的名字

输入命令cd demo 进入项目的根目录安装依赖

    $ npm install

可以运行下看看

    $ npm run dev

---

这是运行效果

elm.png

此时我们就简单的搭建了一个基于Webpack的雏形，接下来就是给这个内容填充东西。页面时基于移动版开发的，需要大致说一下基本的框架，上边是一个头部（header组件），和三个路由组件，接下来我们就来简单的构建一下

elm2.png

这就大致构建好了，这个圈出来的router后面用不到可以先删除掉
下一节会来讲述路由的配置，Vue2.0之后路由的创建也改变了，刚接受框架的小伙伴可以多去Vue官网看一下Api文档