从零开始搭建 《vue-hackernews-2.0》

[V2BW]

github 源码： Bulid vue-hackernews-2.0 from Scratch
个人博客：从零开始搭建 《 vue-hackernews-2.0 》

---

前言

欢迎大家来到我的第一个程序搭建教程: 从零开始搭建 《 vue-hackernews-2.0 》。

作为一个前端开发的初学者，在接触学习到 Vue.js 的时候，我发现官方提供并极力推荐的项目《 vue-hackernews-2.0 》对于新手而言比较难理解。但同时我又被这种高度工业化的项目所吸引，所以我决定花一段时间来弄清楚这个项目到底是怎么运行起来的。 在这个教程中我将会通过利用不同的版本的迭代的方式来逐步重建这个项目。

这个项目是面向初学者的。 整个教程中，我逐步实现了这个项目的四个版本，每一个版本之间有一定的递进关系。为了方便理解掌握每个版本的内容，在每个版本的说明中，我会尽量把在相应版本中所需要掌握的知识点列出来。

注明：简便起见，如未特别说明，在之后的所有章节中我会用 Vue-HN 来代替 vue-hackernews-2.0 项目。 项目运行的系统是 Windows 7 ，因条件限制未在其他系统上测试，请见谅。

各版本简介

0. Vue.js, Vuex, Vue-router, HN API, Firebase, ES6

作为一个前端初学者，我对最原始的页面构造比较熟悉，也就是页面只由 HTML 、 CSS 以及 JavaScript 构成。所以自从我开始学习 Vue-HN 这个项目我就想是不是可以用最原始的方法来实现这个项目（当然，不考虑用户体验及性能等方面）。在经过多次失败的尝试之后，我终于只利用 Vue.js 及其生态中的一些库实现了这个版本。下面这两个动图就分别是我这个版本和官方版本。

[ 我的版本 ]


[ 官方版本 ]

1. Webpack, Vue.js, Vue-router, Vuex and Hackernews API

经过第一个版本后，我们对这个项目有了初步的了解。在这个版本中，我们会使用一些工具，使得我们这个项目初步模块化，同时也更加便于维护。我们将会使用到一些基本的插件和包，并通过 webpack 来实现功能。我们只需要简单的配置一下 webpack 就行，不会涉及到服务器端的内容，不会涉及缓存也不会涉及生产模式及开发模式的不同配置。下面的动图就是这个版本的成品，同时这个动图里面还包含了对整个项目的简单解构。

[ 基本功能及简单解构 ]

2. Server, Packages and Plugins for Better Performance

于我而言，这个版本是整个项目中最难的一个版本。为了优化用户体验，原作者将很多因素考虑在内，这就会带来很多需要了解的新知识，比如 node.js 中的 express 框架以及各种插件。服务器端及客户端、生产模式及调试模式的不同配置是这个版本的重点。在接下来的片段中，我会将我所理解的部分分享给大家。 由于这个版本和官网的一样，我就不上效果图了。

3. Change the Project as I like

在这个版本中，我将会根据自己的喜好对整个网页进行一些改造，使得网页整体更具有 Vue.js 风格，至少从视觉上来说更加的 Vue.js 。下面的动图可以预览到我这个版本的成品，为了对照官方例子，你可以去官网查看原网页。对于所添加及更改的部分，本节的下半部分将会详细介绍。

[ Vue-HackerNews 最后版本 ]

写在最后

从开始接触这个项目到现在已经过去好几个月了，一直想通过学习这个项目来巩固 Vue.js 的知识点，但很长一段时间都没有什么收获。因为知识储备不够，很多内容都看不懂。碰壁碰多了就知道转弯。然后去学习 ES6 以及 Node.js 相关知识，再来看的时候，很多地方就豁然开朗了。在这之后，对这个项目的理解速度就远超过之前了。

一天晚上睡不着，就思考着这种情况对于前端新手应该是挺常见的，我为什么不把自己的经验教训分享出来给大家？然后就有了这个项目。
项目实现的过程遇到各种困难，特别是第一个版本和第三个版本。第一个版本所遇到的关键点在上面已经说过了，不断的阅读各种文档然后尝试，最后终于在 Chrome 中跑了起来。挫败感是常态，成就感是偶尔才有的。第三个版本是官方完整版，自认为直到现在对其的理解程度都只有十之七八。但也暂时不纠结了，没有工作经验，很多在工程中需要考虑的因素对我而言还比较捉摸不透。很多问题在经验丰富的开发者来看是一种常识，但对于新手而言却会感到无比的困惑。“书读百遍，其义自见” 就是这个意思吧。

现在项目完成了，再来回顾整个项目，有点感慨。最开始对这个项目的想法是从简到繁一步一步和大家一起重建这个项目，整个过程会非常详细。现在项目完成了，由于精力和知识层次的限制，却并没有完全达到这种效果，还是有点遗憾。不过除此之外，项目覆盖的还是比较全面的。
最后，希望看过我这个教程的小伙伴能够有所收获；如果有小伙伴或者前辈发现文中出现错误，也请不吝赐教，先谢谢大家了。

[V2BW]

小伙伴们觉得有帮助的话去 github 给个 star 啊，哈哈哈~

[leohxj]

加油，除了 todo 项目，我也推荐搞个 HN 的项目练练。

[V2BW]

@leohxj 嗯嗯， todo 的复杂程度还是比较低的~

[osan]

@V2BW 版本 0 里，我发现有个代码是不需要的，就是在 createListView 中，不需要 preFetch。这个 preFetch 方法不会执行到。楼主，是这么回事吧。在研究你的代码，请回复下，期待！

[osan]

另外就是，preFetch 这个方法是 vue 自带的吗，我在官方文档中没有找到有关 preFetch 方法的介绍，能指引下不