摘要：

Vue我也是剛開始學的，看了兩天的文件就開始著手做這件事了，所以對vue瞭解不太深入，沒有能力說的的太詳細萬一是錯誤的不就誤導別人了，所以只對幾個相對來說比較主要的點說明一下。

搭建開發環境：

老生常談的話題！首先自然是要安裝nodejs，這個直接去官網下載安裝即可，再使用命令npm install vue、npm install -g vue-cli去安裝vue和腳手架工具，完成之後再使用命令vue init webpack myproject來初始化專案，初始化完成之後會在目錄下生成這些檔案，到這一步的話環境差不多搭建好了。

接下來是安裝依賴，在這個專案裡面我用了以下幾個庫， 通過命令npm install  xxx --S 安裝，環境差不多搭建完成。
                  "axios": "^0.18.0",         傳送請求的類似ajax
                  "echarts": "^4.2.0-rc.2",      視覺化工具，用於繪製資料曲線圖
                  "element-ui": "^2.4.9",        網頁UI
                  "vue-router": "^3.0.1",         路由，這個一般在初始化專案的時候就安裝了，如果沒有自己手動安裝

開始我們的開發之旅：

首先確定一下頁面佈局，分為三大塊，其中頂欄和側欄顯示內容不變，只變主題部分，佈局樣式使用elementUI中的<el-header>：頂欄容器， <el-aside>：側邊欄容器，<el-main>：主要區域容器實現。

頂欄基本沒啥內容就一個圖示不說了，說一下側邊導航欄，導航欄使用el-menu元件實現，將el-menu的 route屬性設定為true，或者使用router-link去做跳轉，不過那樣顯得要麻煩一些，所以還是推薦第一種

 <el-menu class="el-menu-vertical-demo"
                 background-color="#304156"
                 text-color="#bfcbd9"
                 active-text-color="#409eff"
                 :default-active="$route.path"
                 router >
    <el-menu-item index="/developer/dashboard">
      <i class="el-icon-ump-18"></i>
      <span slot="title">主頁</span>
    </el-menu-item>
    <el-menu-item index="/developer/charts">
      <i class="el-icon-ump-shuju2"></i>
      <span slot="title">歷史資料</span>
    </el-menu-item>
    <el-menu-item index="/developer/devices">
      <i class="el-icon-ump-shebei2"></i>
      <span slot="title">裝置管理</span>
    </el-menu-item>
    <el-menu-item index="/developer/streams">
      <i class="el-icon-ump-shuju1"></i>
      <span slot="title">資料流管理</span>
    </el-menu-item>
    <el-menu-item index="/developer/triggers">
      <i class="el-icon-ump-chufaqi"></i>
      <span slot="title">觸發器管理</span>
    </el-menu-item>
    <el-menu-item index="/developer/console">
      <i class="el-icon-ump-kongzhitai1"></i>
      <span slot="title">控制檯</span>
    </el-menu-item>
</el-menu>
 

最後的效果：

下面開始內容主體，放個樣圖。

樣式部分就不說了看個人喜好，主要說一下如何獲取後臺的資料，資料的獲取需要用到之前安裝的axios外掛，通過axios的get、post等方法訪問後端的介面獲取json資料例如get方法，then和catch是es6的語法，具體的我也解釋明白。如果資料獲取正常，後端返回的資料放在res.data裡面，列印到控制檯看看返回結果，post同理，只是引數不同

axios.get(url, {
　　params: { 'key': 'value' }
}).then((res)=> {
　　console.log(res.data);
}).catch((error)=> {
　　console.log(error);
});
 

一般來說獲取資料可以放在created()或者mounted()裡面，看自己需求吧，created要先於mounted，created那時候還沒有生成dom，如果需要操作dom那麼還是放到mounted裡面吧。

算了就寫這麼多吧，自己都不專業還是不誤導別人了