摘要：介绍是一个纯前端无须服务器实现动态发布的博客文章主要是介绍一下的原理使用的组件和代码结构如何快速部署项目地址演示地址也是我的博客里面有博客的更新记录原理是一个纯前端的项目利用来存储博客的数据是上一个分享代码片段的功能利用来操作实现在网
介绍
VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客
文章主要是介绍一下 VBlog 的原理, 使用的组件和代码结构
如何快速部署 VBlog https://segmentfault.com/a/1190000014879081
项目地址 https://github.com/GitHub-Laziji/vblog
演示地址 https://github-laziji.github.io (也是我的博客, 里面有博客的更新记录)
原理VBlog 是一个纯前端的项目, 利用 gist 来存储博客的数据 ( gist 是 github 上一个分享代码片段的功能 ) , 利用 github-api 来操作 gist, 实现在网页上动态发布博客的功能
查询类api 的大多不需要权限, 写入类的api 则需要token, 所以token 就是管理员的标志, 绑定token 之后可以对博客进行增删改的操作, token 存在本地cookie 中
开发注意事项配置文件读取的总是与 index.html 同级的 ./static/configuration.json, 所以本地 npm run dev 的时候会出现修改配置无效的情况, 如果需要修改的话修改本地的配置文件就行, 发布到 github 之后不影响, 因为修改配置的时候是通过 github-api 修改 ${username}.github.io 下的 /static/configuration.json
查询博客的例子/users/${githubUsername}/gists?page=${query.page}&per_page=${query.pageSize}
github-api 文档
https://developer.github.com/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............. │ └─ social..................社交圈页面 │ ├─ Details.vue.......... │ └─ Main.vue............. └─ static........................ ├─ .gitkeep................... └─ configuration.json.........项目配置文件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95037.html
摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识 主架构：vue, vue-router, vuex UI 框...
摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识 主架构：vue, vue-router, vuex UI 框...
Element iView Vuex Mint UI Vant cube-ui，对比六大 vue ui 组件库，选中最适合的那个。 Element(pc) 介绍 & 版本 饿了么前端团队开发的桌面端组件库，当前最新版本：2.4.8 Star：32.067k 项目特色 团队维护 支持三个版本：vue、react、angular 支持 Nuxt.js 常规支持：多语言、自定义主题、按需引入、内置...
摘要：是有赞前端团队维护的移动端组件库，提供了一整套基础组件和业务组件。一关于距离首次发布刚好过去了半年时间，在这半年时间里团队广泛吸纳社区的反馈和建议，持续对组件进行打磨优化，使得逐渐成长为一个轻量可靠的移动端组件库。 Vant 是有赞前端团队维护的移动端 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面，提升开发效率。 showImg(...
阅读 846·2023-04-25 21:21
阅读 3228·2021-11-24 09:39
阅读 3069·2021-09-02 15:41
阅读 1997·2021-08-26 14:13
阅读 1830·2019-08-30 11:18
阅读 2772·2019-08-29 16:25
阅读 509·2019-08-28 18:27
阅读 1583·2019-08-28 18:17
