一蹋辅、寫在前面
據(jù)說vue 2.5已經(jīng)發(fā)布了，更好的集成了Ts(TypeScript), 然并卵挫掏。侦另。。尉共，反正我是從vue2.0開始折騰的褒傅，這篇文章不是一個教程,只是作為一個Web beginner 給自己的折騰增加點樂趣。袄友。殿托，一直寫代碼會很煩躁，與其坐在電腦前2B一樣的寫代碼剧蚣，還邊寫邊吐槽自己寫的東西支竹，不如寫個bug讓大家一起吐槽旋廷。。唾戚。
項目設(shè)計圖
頁面相當(dāng)簡單哈柳洋， 登錄頁，首頁叹坦，詳情頁熊镣。。
二募书、準備工作
項目直接用的vue 官方的腳手架工具初始化的绪囱。所以機器上事先安裝了node,和webpack（至于這倆玩意兒怎么安裝請自行百度。莹捡。鬼吵。。）篮赢，順著官方的提示一直往下擼,執(zhí)行‘npm run dev’后齿椅，瀏覽器會自動打開初始化的項目，生成一個相當(dāng)low的samble, low 不low看圖就知道了启泣。涣脚。
打開你的IDE，我這邊用的是VS(Virtual Studio), 咱們還是先來看一下demo的目錄結(jié)構(gòu)
目錄有很多寥茫，其實也不比驚方（慌）, 我們的代碼主要是在src目錄（當(dāng)然這個目錄你可以自行創(chuàng)建遣蚀，然后在config 目錄下的webpack.base.config進行相應(yīng)的配置，不過這種費力不討好的事情咱們就不折騰了）纱耻。OK, 搞清楚一個大概之后芭梯，我們就可以在這個事例項目中搞事情了。對 src目錄進行開刀弄喘。玖喘。
三、開始碼代碼了
對官方的demo 進行小手術(shù)之后蘑志，src 目錄結(jié)構(gòu)如下圖
因為我自己的這個項目的頁面結(jié)構(gòu)相當(dāng)簡單芒涡，一個公共的頭部Header, 內(nèi)容頁公共的組件（components 目錄）按時間篩選結(jié)果（Filter）, 篩選結(jié)果列表（List）,篩選結(jié)果匯總（Statistic），然后5個頁面（pages, 請大家忽略Auth.vue, 這是鄙人犯傻搞出來卖漫，后來想想當(dāng)時這么做是相當(dāng)蠢的）。本篇處置化項目就寫到這里赠群，太長大家看的也犯困羊始，犯累。查描。我后面會一個一個頁面突委，一個一個組件慢慢寫柏卤，這讓大家吐槽點就更多一點，不能在一篇文章里把槽點全吐完了匀油。缘缚。。
