vue初體驗-單頁web應(yīng)用練習(xí)

每天一小步,前端一大步

github.com/wangzhuo-web/vue.js 我的github-spa列表頁小功能代碼地址

(因為在線demohttps://wangzhuo-web.github.io/vue.js/是個空網(wǎng)頁就不展示了哈)下面是效果截圖


?????? 剛接觸vue,npm(包管理)祈坠、webpack(打包的)、組件化、cli(腳手架)楞泼、路由等名詞可能讓你有點懵,先對他們有大概了解笤闯,再做練習(xí)的時候就會慢慢理解了堕阔。

????? 安裝步驟百度有很多相關(guān)教程:我就概述一下(!強烈推薦淘寶的cnpm望侈,要不后續(xù)會因為網(wǎng)速或者墻下載失斢∈摺)。

????? 安裝node.js->cnpm(淘寶的鏡像)->vue-cli(光用script也行脱衙,但這樣可以把模板組件一起輸出侥猬,前后端分離)->建項目(項目里的各文件是干什么的可以好好理解下,如src是放項目代碼的捐韩,index.html是最后裝載的主html退唠,component里放各個組件)->安裝依賴(因為還依靠好多其他的功能,webpack會把各個內(nèi)容打包成js荤胁、css等文件瞧预,像圖片也不用放在一個圖里減少請求,它就會幫你做的)仅政。


????? 安裝完成就要考慮如何實現(xiàn)spa了垢油,顧名思義就是不刷新(據(jù)說比ajax還厲害),靠路由來切換錨點圆丹,實現(xiàn)內(nèi)容的轉(zhuǎn)換滩愁。知乎上關(guān)于spa優(yōu)缺點的說明 明白思路就開始敲-思考-敲-思考-敲了。

一辫封、先在component中建立每個組件(單文件組建的結(jié)構(gòu)了解下哈)template硝枉,script廉丽,style實現(xiàn)了本組件的結(jié)構(gòu)、行為和樣式妻味。(因為還不太熟悉怎么設(shè)置假數(shù)據(jù)正压,所以一個內(nèi)容一個組件了。)

二责球、建立路由(建項目時候會提示install vue-router焦履?,之后在官網(wǎng)上下插件進來也行)雏逾,設(shè)置每個頁面對應(yīng)的路徑錨點裁良。

三、把路由給vue校套,通過<router-link>來嵌套標簽,屬性to完成指定牧抵,最后通過<router-view>來顯示笛匙。

做完 cnpm run dev運行一下,就實現(xiàn)了犀变。

剛開始學(xué)習(xí)妹孙,可能有理解不對的地方,如有錯誤希望大家多多指正获枝。




最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蠢正,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子省店,更是在濱河造成了極大的恐慌嚣崭,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件懦傍,死亡現(xiàn)場離奇詭異雹舀,居然都是意外死亡,警方通過查閱死者的電腦和手機粗俱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門说榆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人寸认,你說我怎么就攤上這事签财。” “怎么了偏塞?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵唱蒸,是天一觀的道長。 經(jīng)常有香客問我烛愧,道長油宜,這世上最難降的妖魔是什么掂碱? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮慎冤,結(jié)果婚禮上疼燥,老公的妹妹穿的比我還像新娘。我一直安慰自己蚁堤,他們只是感情好醉者,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著披诗,像睡著了一般撬即。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上呈队,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天剥槐,我揣著相機與錄音,去河邊找鬼宪摧。 笑死粒竖,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的几于。 我是一名探鬼主播蕊苗,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼沿彭!你這毒婦竟也來了朽砰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤喉刘,失蹤者是張志新(化名)和其女友劉穎瞧柔,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體睦裳,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡非剃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了推沸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片备绽。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鬓催,靈堂內(nèi)的尸體忽然破棺而出肺素,到底是詐尸還是另有隱情,我是刑警寧澤宇驾,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布倍靡,位于F島的核電站,受9級特大地震影響课舍,放射性物質(zhì)發(fā)生泄漏塌西。R本人自食惡果不足惜他挎,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望捡需。 院中可真熱鬧办桨,春花似錦、人聲如沸站辉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽饰剥。三九已至殊霞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間汰蓉,已是汗流浹背绷蹲。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留顾孽,地道東北人瘸右。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像岩齿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子苞俘,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 師從格雷厄姆,巴菲特的同門師兄岗憋。 1955年成立了沃爾特?施洛斯合伙人公司肃晚,管理自己和合伙人的資金,直到2002年...
    天涯知己楊再成閱讀 307評論 0 0
  • 昨天下午仔戈,內(nèi)勤辦公室忽然傳來一陣歡呼聲关串,原來是某同事收到了一束花,同事是沒結(jié)婚的女孩子监徘,也沒聽說有男朋友晋修。辦公室的...
    心遙遠閱讀 248評論 0 0
  • 漂泊久了總想歸家,這片薄薄樹葉凰盔,讓我想起故鄉(xiāng)那滿山厚厚的落葉墓卦,風吹揚起一片片葉舞翩遷,風停户敬,落下一陣陣葉雨落剪。踩在厚...
    滄海一粟貝閱讀 259評論 0 1