前端从头搭建个人博客

项目介绍

  几乎每个程序员都有一个博客梦。抱着学习前后端技术的心态花一个月左右的时间来完成这个个人项目。 这是一个使用vue2做前端框架，koa2做后端，mongodb数据库，搭建的单页面应用。网站的功能展示我自己的技术分享，和后台编辑书写博客，支持markdown语法。本次项目大量借鉴了BUPT-HJM大神的博客，从ui到代码细节，借鉴了很多。真的很感谢开源的大神。代码地址github，个人网站地址

项目搭建

  因为前端选型使用vue，想用vue-cli一路平推省心省力来着，但是为了更加深入学习webpack，决定手动从头写起。 关于webpack的实现细节我会单独写一篇博客，因为内容实在太多，在这里只说明实现了哪些功能。

开发环境

  现在前端开发还是很看重开发体验的，我之前在上上家公司前端开发时，开发环境一塌糊涂，以为业内都是这样（后来才知道是前端组长的不负责任）。上家公司的开发环境真的很舒服，不用过多的考虑兼容性，代码风格强制统一，热更新什么的一应俱全。 所以webpack构建的时候就加进去了热更新，使用postcss超前使用css新特性和自动前缀。 需要特别说明的是webpack热更新依赖的还是node，我们都知道webpack-dev-server这个插件是用了express框架作为热更新服务的，但是考虑到本次开发时的后台也是node，只不过用的是koa2,那么完全可以在开发过程中只启动一个node服务，来满足前端和后端的node需求。所以我没有使用webpack-dev-server这个webpack插件，而是自己实现。具体代码会在webpack那篇博客中细讲。

生产环境

  生产环境的构建中，也是很常规的一些实现。例如代码压缩，css加前缀，资源文件的路径处理，图片压缩。开启多线程的打包功能，这里吐槽一句 刚开始打包时间是7秒左右，按照网上的打包优化建议一顿花里胡哨的折腾，结果打包时间涨到9秒了。。。 使用了 webpack引以为傲的很重要的功能，将vue文件拆分成不同的Chunk,配合vue-router按需引入

 // vue-router
 const HelloWorld = () => import('../components/HelloWorld.vue');
复制代码

打包的时候把js拆分，按需引入，好处在于js不至于体积过大。需要说明一下这种语法是es7的新特性，配置babel的时候坑很多。

总结

  webpack更新换代太快了，很多时候没有中文文档，只能一知半解的查github， 但是随着webpack越来越成熟稳定，语法也固定下来，唯一需要我们注意的地方是眼花缭乱的插件，根据自己的需要合理添加。

前端细节

  项目开发的时候前端是最熟悉的一部分，vue作为前端框架，对于这种中小型项目来说很合适。写博客网站也是为了学习，干脆用了vue全家桶。 vue-router,vuex,都在用。 因为我的审美和ui设计实在有限，大量借鉴（抄袭）BUPT-HJM。

首页和博客详情页

  首页包括一个header组件，一个信息展示组件，博客列表页，和分页组件。稍微有点复杂的组件只有信息展示组件和分页组件。 信息展示组件用到了vue的插槽,slot ，默认是自我介绍。关于插槽啰嗦几句：很多初学vue的同学对于插槽的使用和理解很费解，对于vue中的props都会用，作为父组件给组件传值用，而插槽也是如此，只不过props传入的是data数据，而插槽传入的是html 。   分页组件其实是和vuex结合一起写的。vuex里面的state记录分页的当前页数，点击改变页数触发vuex里面的mutations去加载分页数据。   博客详情页数据的加载来源也是和vuex结合，从state里面获取文章id，去get请求博客细节。博客详情页有两个问题， 1.从后端取出来的数据是markdown原始数据，需要解析。 从网上找了一个很好用的解析插件marked，引入，稍微封装一下就可以用了，配置了一下代码块的样式。如果有兴趣可以去看看代码。 2.利用vue的 this.$nextTick 等dom元素渲染完成后，抽离博客中h1到h6的标签。来组合成菜单栏。

Array.from(this.$refs.post.querySelectorAll("h1,h2,h3,h4,h5,h6")).forEach(
       (item, index) => {
         item.id = item.localName + "-" + index
         this.category.push({
           tagName: item.localName,
           text: item.innerText,
           href: "#" + item.localName + "-" + index
         })
       }
     );