VBlog 的代码结构 使用 vue-element vue-vant 组件开发的纯前端博客

介绍

VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客这个帖子主要介绍一下 VBlog 的原理, 使用的组件和代码结构这是之前发的一个如何快速部署 VBlog 的帖子 /t/454125#reply6

项目地址

/GitHub-Laziji/vblog

演示地址

https://github-laziji.github.io (也是我的博客, 里面有博客的更新记录)

原理

VBlog 是一个纯前端的项目, 利用 gist 来存储博客的数据, gist 是 github 上一个分享代码片段的功能, 利用 github-api 来操作 gist, 实现在网页上动态发布博客的功能

查询博客的例子

/users/${githubUsername}/gists?page=${query.page}&per_page=${query.pageSize}

github-api 文档

/v3/

使用的组件

Element-UI (电脑端主要的组件)mavon-editor (markdown 语法的富文本编辑器)vant (移动端的组件)

代码结构

VBlog-master.....................├─ index.html....................├─ package.json..................依赖├─ README.md.....................├─ src...........................源码文件夹│ ├─ api........................调用 github-api│ │ ├─ gist.js.................│ │ ├─ project.js..............│ │ └─ user.js.................│ ├─ App.vue....................│ ├─ assets.....................资源文件夹, 暂时没东西│ │ └─ logo.png................│ ├─ main.js....................入口文件│ ├─ mobile_views...............移动端视图│ │ ├─ blog....................博客页面│ │ │ ├─ Details.vue..........│ │ │ └─ Main.vue.............│ │ ├─ layout..................移动端布局│ │ │ ├─ components...........│ │ │ │ ├─ AppMain.vue.......│ │ │ │ └─ Bottombar.vue.....│ │ │ └─ Layout.vue...........│ │ ├─ project.................项目页面│ │ │ ├─ Details.vue..........│ │ │ └─ Main.vue.............│ │ └─ self....................个人中心页面│ │└─ Main.vue.............│ ├─ router.....................路由│ │ └─ index.js................│ ├─ store......................全局状态管理│ │ ├─ getters.js..............│ │ ├─ index.js................│ │ └─ modules.................│ │├─ configuration.js.....项目配置│ │├─ token.js.............Token│ │└─ user.js..............用户信息│ ├─ utils......................工具文件夹│ │ ├─ cookie.js...............操作 cookie│ │ ├─ request.js..............axios 请求│ │ └─ util.js.................常用方法│ └─ views......................电脑端视图│├─ blog....................博客页面││ ├─ Add.vue..............││ ├─ Details.vue..........││ ├─ Edit.vue.............││ └─ Main.vue.............│├─ common..................公共视图││ └─ TokenDialog.vue......│├─ configure...............配置页面││ └─ Main.vue.............│├─ error...................错误状态页面││ └─ Error404.vue.........│├─ layout..................电脑端布局││ ├─ components...........││ │ ├─ AppMain.vue.......││ │ ├─ Foot.vue..........││ │ └─ Sidebar.vue.......││ └─ Layout.vue...........│├─ License.vue.............│├─ new.....................最新动态页面││ └─ Main.vue.............│├─ project.................开源项目页面││ ├─ Details.vue..........││ └─ Main.vue.............│└─ readme..................README 页面│ └─ Main.vue.............└─ static........................├─ .gitkeep...................└─ configuration.json.........项目配置文件