跟bob老師瘋狂學JS，免費教程大綱請看文末！
9102年了，你還在使用vue嘛？
回答當然是肯定的！
從2016年開始，vue在國內流行起來，這是一個國人開發的短小精悍、有內涵卻又很低調的一款輕量級MVVM開發框架。
有一句話是這麼說的，世界有了Vue，就連太陽都暗淡了許多。
以前我們學前端，總想快點學會jQuery，因為當年的jQuery幾乎可以說就是整個前端，不管月薪幾千、幾萬的前端程序員都要掌握這項技能，才能在公司謀得一個職位~
而現在呢，不管是前端小白，還是工作幾年的前端大神，我們在討論前端始終離不開的一個話題，那就是Vue。這種感覺就像在20歲左右的男生聚會，話題永遠離不開那個女孩一樣。
所以，前端資深非著名程序員Bob深信一個原則，只要掌握了Vue，就掌握了整個前端開發。我面試別人的時候，不管你多大年紀，什麼水平，不好意思，我只問Vue相關的話題。即使有些項目中我可能不會使用Vue（畢竟react、angular等等魑魅魍魎的框架也很優秀），我依然獨愛問他們Vue的問題。
如果接下來你以為我會拋出一些vue的面試問題，那你可就想錯了，要來就來真的，我們直接上項目。
項目截圖
預覽地址：https://www.chuhongbo.com/html/boss-vue2/#/
技術方案
這個項目基於vue2+mintUI+vuex+axios打造，如果能完成這樣的一個效果那還是很不多的嘛。
"dependencies": {
"axios": "^0.19.0",
"mint-ui": "^2.2.9",
"vue": "^2.3.3",
"vue-router": "^2.6.0",
"vuex": "^2.3.1"
},
項目結構
```shell
┌── assets 資源文件
├── components 頁面以及組件
├── js 插件和工具
├── router 路由配置
src──├── styles 頁面樣式
├
├── store module/login：vuex登錄session_id簡單使用
├
├── App.vue 頁面
└── main.js 頁面配置入口
┌── data 頁面所需靜態JOSON數據
static──├── images 頁面所需靜態圖片
```
安裝步驟
``` bash
# 安裝依賴庫
npm install
cnpm install #建議使用cpm安裝
# 開發版啟動預覽 localhost:8080
npm run dev
# 打包生產環境
npm run build
# 使用分析報告打包預覽
npm run build --report
# 運行單元測試
npm run unit
# 運行所有的測試腳本
npm test
```
項目模塊說明
1. 路由
清晰的路由配置，快速定位整體項目功能
export default new Router({
mode: 'history',
scrollBehavior,
routes: [{
path: '/',
name: "login", //登錄
component: login
},
{
path: '/home', //首頁
component: home,
mate: {
keepAlive: true
},
children: [{
path: '/',
name: "joblist", //職位
component: joblist
},
{
path: "/company",
name: "company", //公司
component: company
},
{
path: "/message", //消息
component: message
},
{
path: "/aboutme",
name: "me", //我的
component: aboutme
}
]
},
{
path: "/detail/:jobId",
name: "detail", //職位詳情
component: jobdetail,
meta: {
scrollToTop: true
}
},
2. 登錄
登錄功能啟用session，真正的登錄實現，不只是一個靜態頁面
3. 職位
職位首頁使用懶加載，以及上拉刷新的功能，並且可以通過點擊上方按鈕進行條件篩選查詢。
4. 公司
公司頁面同樣實現了完整的惰性加載以及搜索功能
5. 消息
消息頁面新增tab切換的功能，並且是多個tab切換，這裡可以使用vuex輕鬆實現頁面間通信。
6. 我的
不僅僅是這個頁面，上面所有的頁面都使用axios獲取後端接口地址的數據加載過來的。這是一個全棧的項目，非常不容易，大家且收藏且珍惜。
總結
以上就是項目的大致內容，在這個項目裡面幾乎使用了你可能用到的vue的所有特性以及相關組件，不管是小白學習vue還是公司裡面作為項目參考，那都是非常不錯的一個案例。
由於篇幅限制，在這裡就不詳細給大家講解代碼了，感興趣的小夥伴可以私信我回復：源碼，獲取項目源碼，並且還有機會獲得項目指導！
如果對於看這個項目有點困難的小夥伴，我估計你肯定是JS學習的不夠系統，那麼這裡有一套非常棒的教程，本次福利名額有限，僅提供299份，大家可以私信我回復：源碼，即可領取哦~
免費跟bob老師瘋狂學習JS教程大綱
以上圖片是“跟bob老師瘋狂學習Js”課程大綱，私信我回復：源碼，即可成功領取教程。
趕緊開始吧！
閱讀更多 扣丁寶寶 的文章
