Vue入坑史，从一个简单的项目说起（二）
前端是一个大坑，因为它入门简单，而越往后越难。越往后学的东西就越多，我现在可能已经意识到了：东西是学不完的。所以我选择回归到它的本质，从基础学起。
上一篇我也不知道瞎扯了一些什么东西，这篇继续瞎扯。
学习要先看到最后的效果
我有一个怪癖，看书喜欢从后往前看。可能我是一个急躁的人，不喜欢前面的拖拖拉拉，没玩没了的细节。学习一个新知识，我就想知道最后的效果，然后再决定是否要回过头来看细节。其实我学习Vue或React的时候，我JavaScript都还没搞明白，所以现在也是边接触新的东西，边补JavaScript基础。
说的这里，我觉得也先贴上我的项目的效果图吧。
登录效果
登录效果图
注销效果
注销效果图
聊天效果
这张图有点大，貌似经常加载失败。
聊天效果图
简单的说明一下
我确实是一个比较懒的人，同时我又是一个急躁的人，所以等不及去找应用里的那些图标，想先把效果给做出来，后期可能会补上也可能不会补。
登录和注销可能是个假的，后台不会有任何动作；好吧，聊天可能也是个假的，因为对方可能是个机器人。
没有很炫的效果，也没有很复杂的功能，但该用上的知识几乎都用上了，所以我说这对于初学者还是很有帮助的。首先，有vue-router来实现前端路由，有vuex来管理数据流动，还有vue的过渡动画，有自定义指令directive，有自定义插件，最后还有组件的Slot内容分发。Vue组件开发的思想体现的还算到位。
同时，也可以参考我的另一个完整的项目，尤其是在vuex的使用上更具有参考性。
码字不易，如果你觉得对你有帮助，到GitHub上帮忙star一下，在此先行谢过了。
不聊技术，只谈体会
如果要谈技术，对于初学者我想没有什么比官方文档更好的了，最主要的是它是纯中文啊。当然，以后有时间我会另外写几篇文章，专门分享前端技术方面的知识。
我最开始看到Vue这个词的时候，大约是在去年11月份左右吧，那篇文章主要就是说前端需要学习的东西。在那篇文章中，也看到了像Babel、Jade、Sass、Less、TypeScript、CoffeeScript、Node.js、webpack等一大堆闻所未闻的新词，这对于只懂HTML+CSS+JS的我瞬间懵逼了。可能也是从那时候起，我才算正式的入了前端这个大坑吧。
Vue与React
对于我这个严重患有选择困难症的人来说，Vue与React之间也是纠结了许久。其实我是先学React的，主要是因为它出自著名的Facebook之手，所以潜意识下就觉得它更牛逼一些。可是React基本上都是英文资料，看起来实在费劲，当时也是花了很多功夫才勉强的写了一个小项目。后面由React又引出了Flux和Redux，最受不了的是全部都是英文文档。坚持了一段时间之后，急躁的心有些耐不住性子了，于是就果断放弃转学Vue了。
真正学Vue就是从今年3月开始的，我不喜欢一点一点的看文档，而是直接上手项目。对我来说，我觉得学习的最好方式就是实践。其实当时也是踩过很多坑，大多数都是环境配置上面的，所以我上篇就建议初学者直接使用官方提供的vue-cli工具。
Vue是一种新的思想
如果初次接触这种MVVM的框架，我觉得最重要的就是要理解它的思想，这样学起来才不会很吃力。由于之前学过一段时间的React，所以对于Vue的很多知识感觉也是理所当然。其实无论什么框架，很多东西都是相通的，还是那句话，最重要的是思想。
大致的理解：一个界面由很多的模块（组件）构成，组件也就相当于HTML中的一个标签，只不过这个标签的我们自己定义的。所以它（组件）同样具有标签的功能，也就是属性和事件。属性是用来传递参数的，将外部的值传入到组件的内部，然后在组件内部拿到这个值做一些事情。组件是我们自己定义的，就可以完全控制它的样式和状态，还有它的行为（事件）。所以一个组件就可以这样使用：
<!-- my-component 就是一个自定义的组件-->
<my-component value="Hello World!" @myclick="alert('hello')"></my-component>
<!-- 传递一个value参数进去，监听一个myclick事件 -->
对于使用者来说，我们不关心一个组件的内部是如何实现的，我们只关心它实现的功能。就像我们使用原生的input标签一样，作为一个按钮的时候我们只需要传递一个值进去，然后监听它的点击事件就好了。至于它内部做了些什么，完全不关我们的事。
有一点面向对象的感觉，要干什么，就new一个对象，通过对象去做，至于这个对象是怎么做到的，我们不关心。可是，这个对象需要我们自己来定义。同样的，Vue中的组件也需要我们自己定义，一旦定义好了，只管拿来用。
别问太多为什么
我想大多数初学者跟我一样，都有一个疑问：我们将自定义的组件直接当做标签一样写在HTML文档中，Vue是怎么做到的？我也很奇怪，但我不会去深究，至少现在这个阶段不会。但我知道，其实在真实的浏览器中，我们写在HTML文档中的组件标签已经按照我们定义的结构替换成了原生的标签。也就是说，在真实的HTML文档中，还是原生的那些标签，只不过Vue通过内部的某种机制将我们写的虚拟标签反应在了真实的HTML文档中。当我们需要更新内容的时候，我们只能改变我们自己定义的虚拟文档结构，然后Vue检测到变化之后，就会将改变的部分通过某种机制重新反应到真实的HTML文档中。
这些是我的一些理解，至于更深的理解，我想我现在应该没那工夫去研究了。对于一个框架，我们拿来用就好了，过于深究其原理实在太累太累。有时候，我们应该学会站在巨人的肩膀上做开发。如果非要问个为什么，我想我可以一直追问到二进制、高低电平、电子电荷的起源……妈呀，太可怕了！
习惯命令行
对于前端开发者来说，当接触到node.js之后，可能很多时候就不得不使用命令行了，因为很多工具、插件、框架都是基于node.js的。对于刚接触的人可能不理解，命令行真的很强大，别问为什么，一定要习惯它并且学会一些基本的操作。
记得最开始在学校的时候，老师是叫我们用Dreamweaver来托拉拽一个网页。后来刚出来工作的时候，我的工具是Webstorm（好像只有学校的老师才用Dreamweaver这玩意儿吧）。那时候都是典型的css+js目录，index.html写在根目录。现在，我的工具是Sublime+命令行。在这里，我要推荐一款Windows下比较好用的命令行工具——Git for Windows。
对于习惯Linux和MacOS的人来说，Windows下的命令行工具实在恶心至极。而这款工具，不仅自带了git，而且也支持一些常用的命令，比如cd，rm，ls等，让命令行用起来更像命令行。如果你在node.js环境下开发项目，那么我强烈推荐这款工具。
说到这里，我也强烈建议使用git来进行项目的版本控制，因为它可以让你有反悔的机会。我之前因为手贱不小心用了rm -rf src/这条命令（本来是想删其他目录的），回车的一瞬间，我的内心是崩溃的（经历过的人才会懂）。src/是源文件目录，也就是说前面写的所有代码全都白费了，而且我的项目当时还没有托管到远程的GitHub上，也没有任何备份。万幸的是我之前用了git版本控制工具，一条命令src/目录原模原样的又回来了。当然，git的用处远不止如此。
后记
又胡扯了一篇，不管你喜不喜欢，都希望你喜欢一下，你的支持是我坚持的动力。现在技术类文章网上一搜也是一大堆，所以我觉得写一些个人经历和心得体会，可能对初学者更有帮助。
后面也会写一些纯技术性的文章，把自己遇到的难题和踩过的坑全部整理出来，尽量让初学者少走一些弯路。
