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)了犀变。
