Vue2.0全家桶仿騰訊課堂（移動端）

最近在學習vue,以爲超好用，忍不住本身仿了個騰訊課堂練練手，不當之處還請你們指正（持續更新中）。

效果預覽

?在線預覽：點我！！！在線預覽，手機瀏覽或切換瀏覽器移動調試

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

描述

前端部分

• SPA單頁應用，webpack build to dist

• 移動設備兼容：使用flexible.js和rem處理兼容問題

• Vue Router 處理路由，vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來

• axios作ajax請求

• melement-UI完成構建輪播圖等組件

後端部分

• mock模擬數據好看又好用的模擬數據的平臺

• express 作靜態資源目錄

待更新的功能

• 處理數據相關性，讓課程和課程組件對應顯示

• 改用 express 拋接口

• 用 express + mongodb 保存用戶狀態

• 使用 Vuex 管理組件間的狀態，實現非父子組件之間的通訊

具體功能實現

路由結構

傳統的頁面應用，是用一些超連接來實現頁面切換和跳轉的。vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
咱們建立一個 router，傳入的 routes 中的每一項即爲一條路由（route）配置，表示在匹配給定的地址時，應該使用什麼組件渲染視圖。

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 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

須要注意：
Action 相似於 mutation，不一樣在於：
Action 提交的是 mutation，而不是直接變動狀態。
Action 能夠包含任意異步操做。

使用

npm install
npm run dev

個人簡歷

感興趣請點我