Vue低仿BOSS直聘APP

九成Zero發表於2018-11-07
VueAPP

碎碎念

很久很久以前滿世界都是Vue高仿XXX，出於好奇也想仿一個練練手，選來選去還是選擇了BOSS直聘(不是打廣告！不是打廣告！不是打廣告！15年也曾用Angular1模仿過一次，所以這次還選它吧?)，於是業餘時間開始著手。

閒下來整理下原始碼，讓ta留在記憶裡...

主要目的

1、在實際應用中學習Vue

2、如何遠端協作使用Github

所用技術

1、vue-cli：vue官方開發腳手架

2、vue-router：vue官方路由

3、mint-ui：餓了麼出品移動端UI框架

4、axios：基於promise的HTTP庫

5、stylus：靈活的預編譯CSS

6、flexible.js：可伸縮佈局方案，解決移動端不同視窗自適應

DEMO介紹

1、大概樣子以及檔案目錄

Vue低仿BOSS直聘APP

	     ┌── assets          資原始檔
	     ├── components      頁面以及元件
	     |       ├── aboutme 個人中心
	     |       ├── common  主題路由頁面
	     |       ├── company 公司列表頁面
	     |       ├── job     職位推薦頁面
	     |       ├── login   登入頁面
	     |       ├── message 訊息頁面
	     ├── js              外掛和工具
	     ├── router          路由配置
	src──├── styles          頁面樣式
	     ├── vuex            vuex配置，暫時未使用
	     ├── App.vue         頁面
	     └── main.js         頁面配置入口
	        ┌── data         頁面所需靜態JOSON資料
	static──├── images       頁面所需靜態圖片

複製程式碼

2、協作開發人員(代號)介紹

  • Kobe：負責company和aboutme頁面
  • Amei：負責message頁面

3、其他

實際開發中學到了什麼

1、多人協作開發中使用git的注意事項

2、如何使用sessionStorage

3、如何配置vue-router的懶載入模式

4、如何使用axios傳送ajax

5、使用第三方元件發現問題如何去官方提issues

6、Vue中父子、兄弟元件如何通訊

7、vue-cli在build的時候如何配置相對路徑

8、vue-cli本地開發環境如何配置跨域除錯介面

有待解決的問題

1、路由跳轉後返回如何讓頁面恢復到之前的滾動位置？

2、如何把vuex新增進去？

相關文章