why?
? ? 單頁應用可以很好的實現(xiàn)前后分離艺栈,頁面的渲染,路由的跳轉都叫給前端處理湾盒,后端只負責提供數(shù)據(jù)接口湿右。
首先我們來看下慕課網(wǎng)首頁,典型的多頁電商應用。像這樣一個應用我們可不可以把它重構成一個單頁應用呢罚勾?又有那些難點呢毅人?
難點1
如何實現(xiàn)前端登錄,以及權限管理
難點2
前端如何實現(xiàn)路由跳轉
結合需求荧库,從angularjs堰塌,reactjs,vuejs中分衫,我選擇了vuejs场刑。
主要技術棧
nodejs+webpack+vuejs+vuex+axios+vue-router+elementUI
下面開始前端項目的構建
首先確保你的電腦安裝了nodejs
step1. ?安裝vue腳手架
?npm install -g vue-cli
step2.安裝webpack?
npm install -g webpack
step3. 初始化一個vue項目
vue init webpack robinblog
期間提示是否安裝vue-router 我們選是,其他默認即可
生產(chǎn)的項目 目錄結構如下
然后cd 到當前目錄 執(zhí)行 npm isntall ?安裝項目依賴
前端登錄 和路由跳轉
使用v-router中勾子函數(shù)攔截 需要登錄路由蚪战,具體實現(xiàn)如下
pages 目錄下是頁面牵现,頁面中的其他元素我都定義成了單個的組件(components),然后按需加載即可邀桑。
最終效果 如下 瞎疼, 一個電商網(wǎng)站 的基本功能,不到2天基本搞定壁畸,快的連我自己都不敢相信
可以預見贼急,以后越來越多的的網(wǎng)站都會以單頁應用的形式開發(fā)。?