vueJs(vuex、vue-router)+jQuery实战—我的博客应用

原创 大大大大糖糖 随笔 vueJs 793阅读 2017-06-21 13:56:54 举报

网站地址: http://lilicoder2.get.vip/

前段时间学完了Vue就想着做点东西,看很多朋友都写自己的博客,就动了写自己博客的心思
现阶段用vueJs+jQuery把前端页面搭好了,现阐述下总结的经验与遇到的坑

总述:
模块:笔记(文章)、案例、工具分享。
功能:笔记阅读、评论、分享、搜索、案例展示、工具分享。

1、项目用vue-cli搭建的,官网上有详解,这里不赘述
项目结构:

vueJs(vuex、vue-router)+jQuery实战—我的博客应用
2、组件:
页面(4): 首页、文章列表、文章阅读、案例展示、工具分享

vueJs(vuex、vue-router)+jQuery实战—我的博客应用
3、操作流程:
1)首页(包含导航、轮播、技能水平、最新文章、案例、个人爱好)。
更多文章Btn=>文章列表,文章阅读详细=>文章阅读页。
更多案例Btn=>案例展示列表页,相关案例展示=>案例展示页(子站 未写),相关文章解析=>对应解析文章阅读页
2)笔记(文章分类)=>文章列表页=>文章阅读页
3)案例(案例展示页),相关案例展示=>案例展示页(子站 未写),相关文章解析=>对应解析文章阅读页
效果:
首页

vueJs(vuex、vue-router)+jQuery实战—我的博客应用
文章列表

vueJs(vuex、vue-router)+jQuery实战—我的博客应用
案例

vueJs(vuex、vue-router)+jQuery实战—我的博客应用
工具

vueJs(vuex、vue-router)+jQuery实战—我的博客应用
阅读页

vueJs(vuex、vue-router)+jQuery实战—我的博客应用

技术解析:
app.vuejavascript 代码

包含头部和尾部以及router-view。

header.vue
html 代码

说的有些乱,代码自取,觉得可以就star,觉得不可以可以直接指出\
[color=#ff0000]GitHub地址:https://github.com/lilicoder/my_blog[/color]

ps:现只写了前端部分,部分console没删。后台并没有做,待学了react再来写一篇后台页面

为什么没写完??因为每一个今天都会觉得昨天写的是辣鸡,想重写!

愿你光芒耀眼,锋芒内敛

评论 ( 4 )
最新评论