脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

介绍

原理

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.........项目配置文件

火狐截图_2018-05-17T02-17-33.589Z.png

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过