vue+element+echarts響應式後臺管理系統,瞭解一下？

寒假結束了，趁着寒假，本身玩了一下element和echarts去實現了一個簡單的後臺管理系統。 項目比較簡單，十分適合入門，涉及到了輪播圖，表格，表單，echarts柱形圖和折線圖，以及網頁的響應式等。

項目結構

src
  |---common                     // 公用的文件
        |---css
             |---base.scss      // 公用的css樣式
        |---components          // 組件      
             |---Carousel.vue   // 輪播圖組件
             |---Form.vue       // 表單組件
             |---Tables.vue     // 表格組件
             |---TheHeader.vue  // header組件
             |---TheNav.vue     // 左側導航欄組件
             |---TwoEcharts.vue // 柱形圖和折線圖組件
        |---images
             |---portrait.png   // 頭像
        |---router
             |---index.js       // 路由
        |---views
             |---CarouseTable.vue // 輪播圖和表格頁面
             |---Echarts.vue      // echarts圖表頁面
             |---FormView.vue     // 表單頁面
  |---App.vue                     // 總app入口
  |---main.js                     // app實例
複製代碼

效果：

pc端

移動端：

技術棧

• vue ^2.5.二、 vue-router
• scss 中文網站：scss中文
• Element (表格，表單，佈局等) 官網：Element
• Echarts (柱形圖和折線圖) 官網： echarts

本文代碼地址：後臺管理系統源碼