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.........