Vue2.0全家桶仿騰訊課堂（移動(dòng)端）

zorro 發(fā)布于2019-08-29 12:48 / 2952人閱讀

摘要：最近在學(xué)習(xí)覺(jué)得超好用，忍不住自己仿了個(gè)騰訊課堂練練手，不當(dāng)之處還請(qǐng)大家指正持續(xù)更新中。的使用的狀態(tài)存儲(chǔ)是響應(yīng)式的。需要注意類(lèi)似于，不同在于提交的是，而不是直接變更狀態(tài)。

最近在學(xué)習(xí)vue,覺(jué)得超好用，忍不住自己仿了個(gè)騰訊課堂練練手，不當(dāng)之處還請(qǐng)大家指正（持續(xù)更新中）。

效果預(yù)覽

?在線預(yù)覽：點(diǎn)我！！！在線預(yù)覽，手機(jī)瀏覽或切換瀏覽器移動(dòng)調(diào)試

?源碼地址：Github??求你的小星星～

描述 前端部分

SPA單頁(yè)應(yīng)用，webpack build to dist

移動(dòng)設(shè)備兼容：使用flexible.js和rem處理兼容問(wèn)題

Vue Router 處理路由，vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問(wèn)路徑，并將路徑和組件映射起來(lái)

axios做ajax請(qǐng)求

melement-UI完成構(gòu)建輪播圖等組件

后端部分

mock模擬數(shù)據(jù)好看又好用的模擬數(shù)據(jù)的平臺(tái)

express 做靜態(tài)資源目錄

待更新的功能

處理數(shù)據(jù)相關(guān)性，讓課程和課程組件對(duì)應(yīng)顯示

改用 express 拋接口

用 express + mongodb 保存用戶(hù)狀態(tài)

使用 Vuex 管理組件間的狀態(tài)，實(shí)現(xiàn)非父子組件之間的通信

具體功能實(shí)現(xiàn) 路由結(jié)構(gòu)

傳統(tǒng)的頁(yè)面應(yīng)用，是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面切換和跳轉(zhuǎn)的。vue-router單頁(yè)面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。
我們創(chuàng)建一個(gè) router，傳入的 routes 中的每一項(xiàng)即為一條路由（route）配置，表示在匹配給定的地址時(shí)，應(yīng)該使用什么組件渲染視圖。

routes: [
    {
      path: "/",
      name: "Index",
      component: Index
    },
    {
      path: "/Classification",
      name: "Classification",
      component: Classification,
      children: [
        {
          path: "ITList",
          name: "ITList",
          component: ITList
        },
        {
          path: "DesignList",
          name: "DesignList",
          component: DesignList
        },
        {
          path: "LanguageList",
          name: "LanguageList",
          component: LanguageList
        },
        {
          path: "ProfessionList",
          name: "ProfessionList",
          component: ProfessionList
        },
        {
          path: "ExamList",
          name: "ExamList",
          component: ExamList
        },
        {
          path: "InterestList",
          name: "InterestList",
          component: InterestList
        }
      ]
    }]

Vuex的使用

Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

需要注意：
Action 類(lèi)似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接變更狀態(tài)。
Action 可以包含任意異步操作。

使用

npm install
npm run dev

我的簡(jiǎn)歷

感興趣請(qǐng)點(diǎn)我