VBlog 的代码结构, 使用 vue-element, vue-vant 组件开发的纯前端博客
介绍
- VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客
- 这个帖子主要介绍一下 VBlog 的原理, 使用的组件和代码结构
- 这是之前发的一个如何快速部署 VBlog 的帖子 https://www.v2ex.com/t/454125#reply6
项目地址
https://github.com/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 文档
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.............
└─ static........................├─ .gitkeep...................└─ configuration.json.........项目配置文件
转载于:https://my.oschina.net/u/3707548/blog/1813312
VBlog 的代码结构, 使用 vue-element, vue-vant 组件开发的纯前端博客相关推荐
- vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...
- Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容)
Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题 需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据 需要向服务端提交一 ...
- element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
- vue element 的 el-cascade 组件如何实现多选点击确认提交操作
1. 实现效果 做这个也是自己踩了好多坑,比如: 用第三方的 el-cascader-multi 多选组件,不能实现自己想要的效果,element 最新版 2.12.0 就已经有完善,不需要使用那个第 ...
- springboot+vue练手级项目,真实的在线博客系统
文章目录 spring boot 练手实战项目说明 基础知识 面试准备 1. 工程搭建 1.1 新建maven工程 1.1.2遇到的bug 1.2 配置 1.3 启动类 2. 首页-文章列表 2.1 ...
- Vue、Node全栈项目~面向小白的博客系统~
个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议 ...
- 【Vue+SpringBoot】超详细!一周开发一个SpringBoot + Vue+MybatisPlus+Shiro+JWT+Redis前后端分离个人博客项目!!!【项目完结】
项目目录 资源准备 前后端分离项目 技术栈 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 3.统一结果封装 4.整合shiro+jwt,并会话共享 ...
- vue 请求多个api_Vue 创建多人共享博客
多人共享博客 上一个项目:仿 CNODE 社区 刚完成,感觉有点意犹未尽,对于 登录 这一块老师并没有展开,我先是用了 localStorage 自己瞎搞,跑通之后想了下,vuex 不是专门做全局状态 ...
- Vue.js的复用组件开发流程
本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...
- vue 项目总结一组件开发的配置和例子
原文地址:https://segmentfault.com/a/1190000012410259?_ea=2993723 先上 src 文件夹的结构图: 文件及文件夹作用 App.vue App.vu ...
最新文章
- MySQL编码引发的两个问题
- 手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
- cygwin用命令安装软件_软件安装、命令行、Github
- 推荐《淘宝的可伸缩高性能互联网架构 》
- 1.6 Java数组也是一种数据类型
- 比较好的php源码,目前市面上能拿到的最好的PHP跑F分源码下载
- linux挂载硬盘 只读,mount: /dev/vdb 写保护,将以只读方式挂载
- Spring JdbcTemplate配置
- 多径传播matlab仿真·信号分析处理
- cannot convert 'this' pointer from 'const class A' to 'class A '
- 为什么java什么意思_java – 什么意思是immutable?
- 05.SpringBoot的yml配置详解
- C# 委托事件传递参数
- 【疲劳检测】基于matlab行为特征疲劳驾驶检测【含Matlab源码 944期】
- 最佳 Web 编程语言都有哪些?
- 张开涛 shiro 博客地址
- Centos7.2离线安装Docker和nvidias-docker2安装教程
- uniapp实现上传图片
- 【Nginx 快速入门】反向代理、负载均衡、动静分离
- 手游人类一败涂地联机一直连接服务器,人类一败涂地手游怎么联机
热门文章
- Vue:type check failed for prop “pageSize“. Expected Number with value xx 问题
- 曲线运动与万有引力公式_高中物理公式大总结:曲线运动、万有引力
- 如何修改显示Office图标而不是wps图标
- 恶魔奶爸 指南帖——简易版
- Leetcode第二期Task01 链表 707. 设计链表 206.反转链表 203.移除链表 328.奇偶链表 234.回文链表 21.合并两个有序链表 019.删除链表的倒数第 N 个结点
- excel锁定前几行,无法选择和编辑
- 2020秋招提前批--大疆--机器学习算法工程师--线上笔试题
- win7指定网络名不再可用
- 情侣天气推送升级简单版 项目上传github实现定时自动推送教程
- 计算机操作系统-2-处理器管理