项目介绍

该项目是一个github上的一个开源的vue入门项目，内容是使用vue来简单重构cnodejs社区。源代码链接：VueCnodeJs。值得一提的是，原作者也是通过此项目入门vue，所以可以跟随他的commit记录，一步一步的上手vue的使用。
我把自己的代码放到了gitee上：我的代码，和原作者相比，我在代码里加了很多注释，毕竟对htmk css js都还不是那么熟悉，有需要的朋友可以参考。
项目最终效果：预览

我的收获

Vue

为什么要用Vue

我在学习Vue之前用过jquery一段时间，想想用jquery的时候，我们会用$()取出dom对象，并对其操作。这种操作手段在面对复杂的项目时会很让人头疼，而Vue则让我们只用关注数据的操作以及和对象的绑定，具体的dom操作由Vue操作，这样使得程序开发变得更加简单易懂。
当然Vue还有其他优点，这是我暂时还没接触到，以后感受到了再写。

项目逻辑

程序的入口是什么？index.html,main.js,App.vue这些文件之间的关系是什么？组件是什么并且怎么引入？
这些就是很基础的内容了，查阅Vue的官方文档，看看项目代码，就能理清楚了。

钩子函数

本项目中目前涉及到了created、beforeCreate、mounted、beforeRouteUpdate的使用，mounted可以监听鼠标键盘事件等；beforeRouteUpdate可以在同一个页面下变更数据。

Vue-Router

路由是实现单页面应用的必备元素。通过路由，我们可以划定路径和页面的对应关系，而页面又可以用组件构建而成。我认为通过路由结合组件，就达到了把网页划分成一块一块来写并展示的效果。
项目目前只是简单的用到了Vue-Router，如children属性等均未涉及。

Vue-Resource

这是vue集成的异步数据交换的插件。Vue项目中更常见的是使用axois，之后会用其来替代vue-resource。

Element-UI

项目目前没有完全使用element-ui，仅是用到了其两个组件：dialog和loding。特别是loding和vue中的监听属性Watch结合使用。

Css

主要是各种样式的设置技巧。
display:flex;和justify-content以及align-items和align-content的配合
盒子模型、margin,padding,border以及box-sizing: border-box的作用
rem单位
圆角与阴影：border-radius与box-shadow

未解决的问题

在组件内导入css文件引起的各种问题