vue+element+echarts 響應式后臺管理系統，了解一下？

HmyBmny 發布于2019-08-26 17:15 / 1242人閱讀

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

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

先來看看效果： 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.2、 vue-router

scss 中文網站： scss中文

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

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

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

# 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

GPU云服務器云服務器響應式響應式布局響應式網站響應式設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110118.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0