iT 邦幫忙 | vue element admin
本文同步刊載於我的個人部落格:記帳程式|07.記帳程式畫面布局[1]經過好幾天枯燥無趣的環境設定,今天終於可以進到比較有趣的前端畫面開發了!對於後面幾天要開發的功能,順手將前面第三篇[2]規劃預計要做的功能畫成了心智圖,有地圖在手,才不會像前幾天莫名其妙就設定了三天的環境迷失方向(汗)。不過看完全部要做的內容後,我可以大膽的假設30天做不完,估計只能做完基本功能的其中幾個,況且應該還要弄一些後端的內容讓整個系統更完整,有順利完賽的話之後再接續著完成這個「比想像中更麻煩」的sideproject吧!頭都洗到第七天了...
本文同步刊載於我的個人部落格:記帳程式|07. 記帳程式畫面布局[1]
經過好幾天枯燥無趣的環境設定,今天終於可以進到比較有趣的前端畫面開發了!
對於後面幾天要開發的功能,順手將前面第三篇[2]規劃預計要做的功能畫成了心智圖,有地圖在手,才不會像前幾天莫名其妙就設定了三天的環境迷失方向(汗)。
不過看完全部要做的內容後,我可以大膽的假設 30 天做不完,估計只能做完基本功能的其中幾個,況且應該還要弄一些後端的內容讓整個系統更完整,有順利完賽的話之後再接續著完成這個「比想像中更麻煩」的 side project 吧!
頭都洗到第七天了,只好繼續洗下去了...
murmur 結束。於是今天要從最基本的網站的 layout 開始刻起,先將外框刻出來!
今日大綱 初探 Vue Element Admin 參考 Vue Element Admin 刻出基本布局 初探 Vue Element Admin前幾天提到一個使用 Vue 與 element-ui 包好的「後台前端解決方案」,先附上官方文件:
也就是說,作者已經將大家實作後台時,可能會用到的元件都包山包海放進去了,直接載下來改比較省工沒錯,但稍微瀏覽後又將它 build 起來,發現這包程式實在太大包了,與其將它瘦身,不如參考它的結構,自己用 Vue 與 Element 建起來。
首先從布局開始看,官網文件貼心的給了圖:
考慮到我的記帳程式主要會用手機操作,可以收合的選單列是必要的,因此我會取用其中的 Sidebar(功能選單)、Navbar(標題及設定)、AppMain(內容),這三塊當作我的記帳程式布局。
測試了一下,在手機上也有不錯的效果,不過根據官方說法,element-ui 的定位是桌面端後台框架,是 vue-element-admin 自己簡單用 media query 做了 RWD,看來之後還是要自己調整。
記帳程式布局於是參考 element-ui 中的「...