Vue Version Blog App
Change Log
这篇文章写于 2017-05-05. 下面一部分没实现的功能已经基本实现,并且做了更多的配置外化工作.
详情将会发布到新的一篇文章里面.
Background
在阅读过 Vue 的官方文档之后,我尝试用其为一个数据可视化项目的图表做一个 Refine,以寻求渲染性能与响应变化上性能的提升,与更细致,可自定义的动画效果.
虽然 Vue 是一个渐进式的前端框架,但是突然想以 Vue 全家桶去实现一次 Angular1.x 项目中所有的功能,于是便以自己的 Blog App 作为一个初始项目进行练手.
从四月份开始进行 Vue 的学习,目前 Vue 版本的 Blog App 已经实现了@Angular 版本的所有功能.
记录一下中间的历程.
根据目前所做的工作,
代码放在Vue 分支上.
Features
目前实现的功能有:
- Single Page Application [单页应用]
- Progressive Web Application [渐进式网页应用]
- Markdown Writing [使用 Markdown 进行写作]
- Support Code Highlight [支持代码高亮]
- Disqus [支持 Disqus 评论]
- Configurable [抽取配置到独立的配置文件]
- Sitemap auto generating [自动生成 Sitemap]
中间有一些跌坑之后还在纠结于没找到优雅的解决方案的地方:
- No Support Pre-rendering [不支持预渲染]
为单页应用进行预渲染,生成对应的静态 index.html,可以有效被搜索引擎收录 Vue 本身支持 webpack 的
prerender-spa-plugin
. 但Vue-Material
的菜单展开方式是动态渲染的,所以目前还不能做到预渲染.(这里跌了几天的坑) 目前部署在 Github Pages 上的话会没有 SEO. 因为 SPA 在搜索引擎爬的时候会先返回一个 404,再根据 Github 的约定返回 404.html. 搜索引擎就把该 url 当成失效的链接. 部署在 VPS 上的话支持 SEO.
Development
Dependencies
为了实现与 Angular 版本相同的效果,才用的 Vue 全家桶 + 其他主要的库是
- Vue [2.3.2]
- Vuex
- Vue-Router
- VueMaterial
- Axios [前后端通用的 http 请求框架]
- Marked [Markdown 解析部分]
- Hightlight.js [为 Markdown 的代码片段渲染出高亮效果]
Development Course
从头到尾,大概的功能开发思路是如此的:
- 阅读 Vue + Vuex + Vue-Router 的文档
- 学习 Vue-Webpack Template 中的项目结构与构建方式
- 重写基于 Marked 的 Markdown Post API
- 确定基本的 Gulp 构建任务流
- 以纯 ES6 的方式修改 Webpack 与 Gulp 任务流
- 使用 Vue 全家桶完成基本界面开发
- 重构应用部分的代码成模块化加载方式
- 添加 PWA,Sitemap 等功能
- 添加 CI 配置
Usage & Document
参见: Blog App Usage