vue+element+echarts 響應(yīng)式后臺(tái)管理系統(tǒng)，了解一下？

HmyBmny 發(fā)布于2019-08-26 17:15 / 1249人閱讀

摘要：寒假結(jié)束了，趁著寒假，自己玩了一下和去實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的后臺(tái)管理系統(tǒng)。項(xiàng)目比較簡(jiǎn)單，十分適合入門，涉及到了輪播圖，表格，表單，柱形圖和折線圖，以及網(wǎng)頁(yè)的響應(yīng)式等。

寒假結(jié)束了，趁著寒假，自己玩了一下element和echarts去實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的后臺(tái)管理系統(tǒng)。
項(xiàng)目比較簡(jiǎn)單，十分適合入門，涉及到了輪播圖，表格，表單，echarts柱形圖和折線圖，以及網(wǎng)頁(yè)的響應(yīng)式等。

先來(lái)看看效果： pc端

移動(dòng)端：

項(xiàng)目結(jié)構(gòu)

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

技術(shù)棧

vue ^2.5.2、 vue-router

scss 中文網(wǎng)站： scss中文

Element (表格，表單，布局等) 官網(wǎng)：Element

Echarts (柱形圖和折線圖) 官網(wǎng)： Echarst

本文代碼地址：后臺(tái)管理系統(tǒng)源碼

# 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