vue+express：搭建個人博客（1）

最近正在看nodejs，在加上vue有不算很熟悉。
實踐出真知，打算寫個個人博客管理來練練手，當然，有參考。
一個 Vue.js+Node.js 的博客內容管理系統
會更新博文，主要記錄一下自己搭建過程

---

使用Vue-cli腳手架

安裝vue-cli

npm install -g vue-cli

搭建項目

vue init webpack myBlog

下面會有一系列的選擇，我選擇了vue-router以及eslint編碼規範。

目錄如下：

1. build和config都是webpack配置
2. src是存放項目源文件的目錄
3. static 存放第三方靜態資源，這個裏面的gitkeep是這個目錄爲空，也可以把這個目錄提交的git倉庫 裏面，因爲通常一個空目錄是不能提交git倉庫裏面的
4. babelrc 是babel的配置項。
5. editorconfig是編輯器的配置項
6. gitignore裏面存放的是會忽略語法檢查的目錄
7. index.html 入口頁面
8. package.json是項目的描述和依賴，我們在開始的時候執行npm run dev ，就相當於執行了這個文件裏面的scripts的dev對應的 node build/dev-server.js。

安裝依賴包並運行

npm install
npm start

package.json

主要看一下這個文件中的內容，
項目依賴，可在後續添加，npm install時加上--save會自動添加

  "dependencies": {
    "vue": "^2.2.6",
    "vue-router": "^2.3.1"
  },

開發依賴，可在後續添加，npm install時加上--save-dev會自動添加

"devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    ...

以上二者是有區別的。devDependencies 下列出的模塊，是我們開發時用的，不會被部署到生產環境，比如css-loader。dependencies 下的模塊，則是我們生產環境中需要的依賴。
我自己的理解是，缺少dependencies，則會導致無法運行。缺少devDependencies，則會導致無法開發調試。這只是片面的理解，有什麼不對歡迎指出~

指定node運行版本號

  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },

---

前端頁面

開始寫頁面了啊

開始頁面

首先是一開始的頁面，主要是實現header固定，點擊文章和關於我的時候只是局部的組件變化。
由於使用了vue-router，所以通過children對組件進行修改就好了~
大致情況是這樣

下面空白的部分用來放文章以及關於我的部分。

文章組件

文章組件主要用來展示所有的文章，以及日期的，還可以在該模塊對文章進行刪除/編輯/收藏操作。
router

  routes: [
    {
      path: '/',
      name: 'editview',
      component: EditView,
      children: [
        {path: '/articles', name: 'articles', component: Articles}
      ]
    }
  ]

在EditView中記得加上<router-view></router-view>否則無法顯示組件。
效果如下：

文章的數據是我暫時仿造的hh，因爲還沒做到那一塊。

---

關於我組件

這個組件和文章組件類似在這裏不說了。
效果

---

忘記添加 添加按鈕了

詭異的圓形按鈕哈哈哈哈到時候加上一些動畫~

---

vuex實現數據的保存和修改

於是在src目錄下創建一個store目錄

此時就需要思考了，state裏面需要存放什麼數據？
肯定要有所有文章和所有鏈接。
至於action和mutation就是修改/添加/刪除文章。

---

會繼續更新