vueJs(2.x)+router+vuex簡易博客系統

之前兩篇文章已經把vue CLI 介紹的差不多了，並且也做了一些自定義的修改，那麼接下來，我們就可以開始coding啦，我們先總結下，我們還欠缺哪些知識點呢？
1、vue.js的一些基礎知識
2、router路由的配置
3、vuex的使用(狀態管理工具)
以上3點本篇暫時都不講，本篇先講講，如何編寫好一個完整的界面，以及拿到項目的時候，該如何劃分好通用模塊，做到高複用。

分析項目設計圖

該圖，是截圖某位前輩的博客，如有得罪多多包涵。

博客首頁分析
1. 導航部分(組件)
2. 左側- 博主介紹(組件)
3. 中間- 文章列表(組件)
4. 右側- 公告(組件)
5. 右側- 評論(組件)
6. 右側- 標籤(組件)
7. 右側- 友情鏈接(組件)
首頁的組件就這些了，首頁我們去建立這個界面，在page文件夾下建立”home/index.vue”

<template>
  <div id="wrapper">

  </div>
</template>

<script>
  /* eslint-disable */
  export default{
    name:"homeIndex"
  }
</script>

<style scoped lang="less">
@import "../../style/homeIndex.less";
</style>

這個是界面骨架，我們按照之前分析的組件一個一個編寫然後填充進來即可
這裏我就不寫所有組件了，我就把左側博主介紹組件貼出來
首先，這個組件以後在文章內容界面也需要複用，所以我們抽取成一個獨立組件
在src/components/common/下面建立一個組件(名字取的比較隨意)leftSide.vue
我直接把這個組件的代碼貼出來，因爲還是比較簡單的

<template>
  <div id="leftSide">
    <div class="header">
      <img src="../../images/header.jpg" alt="">
    </div>
    <h4 class="info">
      <span>&&</span> -
      <span>**</span> -
      <span>^^</span>
    </h4>
    <div class="hot-tip clearfix">
      <span>前端</span> |
      <span>後臺</span>
    </div>
    <div class="position">
      位置：中國：上海
    </div>
    <div class="contract">
      <span class="icon-home2"></span>
      <span class="icon-html-five2"></span>
      <span class="icon-linkedin"></span>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
export default{
    name:"leftSide"
}
</script>

<style rel="stylesheet/less" lang="less">
  @import "../../style/style.less";
#leftSide{
  width:25%;
  height:440px;
  background:#fff;
  box-shadow: 0 2px 5px #ddd;
  box-sizing: border-box;
  .header{
    width:100px;
    height:100px;
    border-radius: 50%;
    overflow: hidden;
    margin:50px auto;
    img{
      width:100%;
      height:100%;
    }
  }
  .info{
    text-align: center;
    color:#565a5f;
    font-size:30px;
    font-weight: bold;
  }
  .hot-tip{
    text-align: center;
    color:#565a5f;
    font-size:18px;
    line-height:40px;
    margin:20px 0;
  }
  .position{
    text-align: center;
    color:#9a9ea3;
    font-size:13px;
  }
  .contract{
    width:80%;
    border-top:1px solid #ddd;
    margin:30px auto 0;
    text-align: center;
    padding-top:20px;
    span{
      margin-right:15px;
      font-size:20px;
      transition:0.3s all ease;
    }
    span:hover{
      color:red;
    }
  }
}
</style>

最後效果就是這樣

template中編寫的就是平時寫的HTML元素
script中要定義好該組件的名稱
style中就可以直接編寫樣式了，也可以直接引入外部文件
注意：rel=”stylesheet/less” 這個是告訴編輯器下面的語法採用less，如果不加，編輯器可能會報錯

組件編寫好了之後，我們要page/home/index.vue界面中引入該組件
page/index.vue中主要是編寫界面框架，對於其中可以服用的組件抽取出來，對於那些不需要抽取的直接就寫在index.vue中，編寫方式都是一樣的。我們可以依次都寫出來。（記得一定要敲喲~）

下面我就把完整的代碼放到github中，歡迎大家下載(代碼已經整合好了router，vuex，axios)，如果需要快速入手的童鞋們，也可以直接拿來用，當然在後面的文章中，還是會講解的

地址：https://github.com/shiyou00/blog_vue

接下來主要內容預覽：
1、vue組件分析以及模板語法簡介
2、route的使用(包含帶參數跳轉，以及組件接收參數)
3、vue項目中整合axios
4、vue項目中整合vuex
等等…