基於Vue搭建自己的部落格

Wqh發表於2019-04-07
Vue

部落格前臺

專案地址: github.com/WqhForGitHu…

如果你覺得專案不錯的話，歡迎點選右上角的'star'鼓勵支援下，萬分感謝。(๑◡๑)

前言

以前我們是用hexo + next來搭建自己的部落格，但最近學習了Vue之後，我被它的資料驅動和元件化思想所吸引。所以就用了Vue搭建了一個自己的個人部落格。Vue實際上對應著MVVM模式下的View圖層，要搭建一個完整的應用僅僅只有Vue是不夠的，我們還需要結合資料狀態管理vuex、路由vue-router等等

技術棧

前端

  • vue
  • axios: 非同步請求庫
  • vuex：管理這個應用資料
  • vue-router：前端路由
  • Element/Iview：桌面端元件庫

後端

  • koa

    部落格的後端是使用Node.js開發的，基於koa的Web框架，完美實現前後端的分離，後端只需要負責提供介面資料，而路由的跳轉、資料渲染都是由前端實現的。

    專案地址:github.com/WqhForGitHu…

實現的功能

  • 部落格首頁列表展示
  • 部落格內容markdown格式
  • 部落格的分類和標籤
  • 返回頂部
  • 響應式設計

TODO

  • 分類頁面
  • 標籤頁面
  • markdown編輯器
  • 介面的優化

部落格預覽

首頁

部落格首頁

標題

標題

內容

內容

專案總結

接下來我大致介紹下我在做部落格專案時的一些經歷和體會。

前端路由

前端發展可謂是很快的，以前用express搭建後臺服務的時候，我們知道有後端路由的概念。根據請求路徑的不用我們就返回不同的頁面資料。而我們學習並使用了前端路由的時候我們發現其實原理是相類似的，就是當頁面重新整理的時候，不會發起URL的請求，它只是根據不同URL去渲染不同的元件。

export default new Router({
  routes: [
    {
      path: '/',
      component: (resolve) => require(['../Blog/Blog.vue'], resolve)
    },
    {
      path: '/Blogcontent',
      component: (resolve) => require(['../Blogcontent/Blogcontent.vue'], resolve)
    },
    {
      path: '/Blogcatalog',
      component: (resolve) => require(['../Blogcatalog/Blogcatalog.vue'], resolve)
    }
  ]
})
複製程式碼

上面的程式碼就是所使用的前端路由vue-router，它是根據不同的路由來渲染不同的元件。

如何管理應用資料

雖然bus已經很好的幫你解決了跨元件需求，但是它在資料管理、維護、架構設計上還只是個簡單的元件，而Vuex卻能更優雅和高效地完成狀態管理。

const store = new Vuex.Store({
  state: {
    bloglist: [],
    blogcontent: {}
  },
  mutations: {
    setbloglist (state, params) {
      state.bloglist = params.bloglists
    },
    setblogcontent (state, params) {
      state.blogcontent = params.blogcontent
    }
  }
})
複製程式碼

store包含了應用的資料（狀態）和操作過程。Vuex的資料都是響應式的，任何元件使用同一store的時候，只要store發生變化，對應的元件就會立即更新。

在元件內，來自store的資料只能讀取，不能手動改變，改變store中的資料的唯一途徑就是顯式地提交mutations

相關文章