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

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

先來看看效果:

pc端

圖片描述

圖片描述

圖片描述

移動端:

圖片描述

圖片描述

圖片描述

項目結構

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實例

技術棧

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

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

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
相關文章
相關標籤/搜索