WHAT

Vue-blog是我边看Vue文档自学边写的博客,后端基于Typecho通过API调用,前端则使用Vue全家桶。

WHY

  1. Vue-cli是Vue的脚手架工具,能够快速构建vue项目
  2. Vue更新到2.0之后,作者宣告不再对vue-resource更新,于是使用axios进行http请求
  3. Typecho是Markdown编辑器,储存在数据库的文章也是mk格式,因此使用marked解析和highlight代码高亮
  4. 逛遍基于Vue的UI框架,发现muse-ui还是有些对我口味,基于Vue 2.0 和 Material Desigin 的 UI 组件库
  5. Typecho-Api输出的文章时间为Unix时间,使用moment解析并格式化时间

WHERE

  1. 使用Vue开发时领我感触最深的就是生命周期和父子组件通信,这两个关键点搞懂我认为Vue入门不成问题,或者说微信小程序也能够快速上手开发
  2. 为了更像一个App,App Bar(action bar)需要动态更改文章标题
  3. 因为动态加载内容,加载内容后不会返回到页面顶部
  4. 使用marked解析mk格式后,出现与Typecho解析不一致的问题,如不换行、不解析表格

HOW

  1. 生命周期
    查看手册:/api/#选项-生命周期钩子
  2. Vue父子组件以及非父子组件如何通信
    查看文章:/vue-father-child.html
  3. 动态更改文章标题
    查看代码:/header.vue#L3
  4. 加载内容后页面置顶
    查看代码:/single.vue#L50-L51
  5. marked解析与highlight高亮设置
    查看代码:/single.vue#L13-L25

Vue-blog

最后修改:2017 年 12 月 14 日
如果觉得我的文章对你有用,请随意赞赏