資訊專欄INFORMATION COLUMN
摘要：介紹是一個(gè)純前端無(wú)須服務(wù)器實(shí)現(xiàn)動(dòng)態(tài)發(fā)布的博客文章主要是介紹一下的原理使用的組件和代碼結(jié)構(gòu)如何快速部署項(xiàng)目地址演示地址也是我的博客里面有博客的更新記錄原理是一個(gè)純前端的項(xiàng)目利用來(lái)存儲(chǔ)博客的數(shù)據(jù)是上一個(gè)分享代碼片段的功能利用來(lái)操作實(shí)現(xiàn)在網(wǎng)
介紹
VBlog 是一個(gè)純前端, 無(wú)須服務(wù)器, 實(shí)現(xiàn)動(dòng)態(tài)發(fā)布的博客
文章主要是介紹一下 VBlog 的原理, 使用的組件和代碼結(jié)構(gòu)
如何快速部署 VBlog https://segmentfault.com/a/1190000014879081
項(xiàng)目地址 https://github.com/GitHub-Laziji/vblog
演示地址 https://github-laziji.github.io (也是我的博客, 里面有博客的更新記錄)
原理VBlog 是一個(gè)純前端的項(xiàng)目, 利用 gist 來(lái)存儲(chǔ)博客的數(shù)據(jù) ( gist 是 github 上一個(gè)分享代碼片段的功能 ) , 利用 github-api 來(lái)操作 gist, 實(shí)現(xiàn)在網(wǎng)頁(yè)上動(dòng)態(tài)發(fā)布博客的功能
查詢類api 的大多不需要權(quán)限, 寫入類的api 則需要token, 所以token 就是管理員的標(biāo)志, 綁定token 之后可以對(duì)博客進(jìn)行增刪改的操作, token 存在本地cookie 中
開發(fā)注意事項(xiàng)配置文件讀取的總是與 index.html 同級(jí)的 ./static/configuration.json, 所以本地 npm run dev 的時(shí)候會(huì)出現(xiàn)修改配置無(wú)效的情況, 如果需要修改的話修改本地的配置文件就行, 發(fā)布到 github 之后不影響, 因?yàn)樾薷呐渲玫臅r(shí)候是通過 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 語(yǔ)法的富文本編輯器)
vant (移動(dòng)端的組件)
代碼結(jié)構(gòu)VBlog-master..................... ├─ index.html.................... ├─ package.json..................依賴 ├─ README.md..................... ├─ src...........................源碼文件夾 │ ├─ api........................調(diào)用 github-api │ │ ├─ gist.js................. │ │ ├─ project.js.............. │ │ └─ user.js................. │ ├─ App.vue.................... │ ├─ assets.....................資源文件夾, 暫時(shí)沒東西 │ │ └─ logo.png................ │ ├─ main.js....................入口文件 │ ├─ mobile_views...............移動(dòng)端視圖 │ │ ├─ blog....................博客頁(yè)面 │ │ │ ├─ Details.vue.......... │ │ │ └─ Main.vue............. │ │ ├─ layout..................移動(dòng)端布局 │ │ │ ├─ components........... │ │ │ │ ├─ AppMain.vue....... │ │ │ │ └─ Bottombar.vue..... │ │ │ └─ Layout.vue........... │ │ ├─ project.................項(xiàng)目頁(yè)面 │ │ │ ├─ Details.vue.......... │ │ │ └─ Main.vue............. │ │ └─ self....................個(gè)人中心頁(yè)面 │ │ └─ Main.vue............. │ ├─ router.....................路由 │ │ └─ index.js................ │ ├─ store......................全局狀態(tài)管理 │ │ ├─ getters.js.............. │ │ ├─ index.js................ │ │ └─ modules................. │ │ ├─ configuration.js.....項(xiàng)目配置 │ │ ├─ token.js.............Token │ │ └─ user.js..............用戶信息 │ ├─ utils......................工具文件夾 │ │ ├─ cookie.js...............操作 cookie │ │ ├─ request.js..............axios 請(qǐng)求 │ │ └─ util.js.................常用方法 │ └─ views......................電腦端視圖 │ ├─ blog....................博客頁(yè)面 │ │ ├─ Add.vue.............. │ │ ├─ Details.vue.......... │ │ ├─ Edit.vue............. │ │ └─ Main.vue............. │ ├─ common..................公共視圖 │ │ └─ TokenDialog.vue...... │ ├─ configure...............配置頁(yè)面 │ │ └─ Main.vue............. │ ├─ error...................錯(cuò)誤狀態(tài)頁(yè)面 │ │ └─ Error404.vue......... │ ├─ layout..................電腦端布局 │ │ ├─ components........... │ │ │ ├─ AppMain.vue....... │ │ │ ├─ Foot.vue.......... │ │ │ └─ Sidebar.vue....... │ │ └─ Layout.vue........... │ ├─ License.vue............. │ ├─ new.....................最新動(dòng)態(tài)頁(yè)面 │ │ └─ Main.vue............. │ ├─ project.................開源項(xiàng)目頁(yè)面 │ │ ├─ Details.vue.......... │ │ └─ Main.vue............. │ ├─ readme..................README 頁(yè)面 │ │ └─ Main.vue............. │ └─ social..................社交圈頁(yè)面 │ ├─ Details.vue.......... │ └─ Main.vue............. └─ static........................ ├─ .gitkeep................... └─ configuration.json.........項(xiàng)目配置文件
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95037.html
摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動(dòng)態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時(shí)主要會(huì)用到的工具。 vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎(chǔ)知識(shí)的文章，需要熟悉 Vue 相關(guān)知識(shí) 主架構(gòu)：vue, vue-router, vuex UI 框...
摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動(dòng)態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時(shí)主要會(huì)用到的工具。 vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎(chǔ)知識(shí)的文章，需要熟悉 Vue 相關(guān)知識(shí) 主架構(gòu)：vue, vue-router, vuex UI 框...
摘要：簡(jiǎn)介前端發(fā)展迅速，開發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫(kù)框架工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫(kù)在滿足自己開發(fā)需求的基礎(chǔ)上，然后最好可以對(duì)源碼進(jìn)行調(diào)研，了解和深入實(shí)現(xiàn)原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...
Element iView Vuex Mint UI Vant cube-ui，對(duì)比六大 vue ui 組件庫(kù)，選中最適合的那個(gè)。 Element(pc) 介紹 & 版本 餓了么前端團(tuán)隊(duì)開發(fā)的桌面端組件庫(kù)，當(dāng)前最新版本：2.4.8 Star：32.067k 項(xiàng)目特色 團(tuán)隊(duì)維護(hù) 支持三個(gè)版本：vue、react、angular 支持 Nuxt.js 常規(guī)支持：多語(yǔ)言、自定義主題、按需引入、內(nèi)置...
摘要：是有贊前端團(tuán)隊(duì)維護(hù)的移動(dòng)端組件庫(kù)，提供了一整套基礎(chǔ)組件和業(yè)務(wù)組件。一關(guān)于距離首次發(fā)布剛好過去了半年時(shí)間，在這半年時(shí)間里團(tuán)隊(duì)廣泛吸納社區(qū)的反饋和建議，持續(xù)對(duì)組件進(jìn)行打磨優(yōu)化，使得逐漸成長(zhǎng)為一個(gè)輕量可靠的移動(dòng)端組件庫(kù)。 Vant 是有贊前端團(tuán)隊(duì)維護(hù)的移動(dòng)端 Vue 組件庫(kù)，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過 Vant 可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開發(fā)效率。 showImg(...
閱讀 856·2023-04-25 21:21
閱讀 3237·2021-11-24 09:39
閱讀 3079·2021-09-02 15:41
閱讀 2009·2021-08-26 14:13
閱讀 1838·2019-08-30 11:18
閱讀 2786·2019-08-29 16:25
閱讀 517·2019-08-28 18:27
閱讀 1590·2019-08-28 18:17
