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

anquan 發布于2019-08-01 17:01 / 869人閱讀

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態。

最近在學習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

我的簡歷

感興趣請點我

GPU云服務器云服務器 vue2.0 cdn 騰訊課堂webrtc 移動端海外移動端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50896.html

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

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態。最近在學習vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續更新中）。效果預覽 ?在線預覽：點我?。?！在線預覽，手機瀏覽或切換瀏覽器移動調試 ?源碼地址：Github??求你的小星星～...

zorro 2019-08-29 12:48 評論0 收藏0
Vue2.0全家桶仿騰訊體育APP（Web版）

摘要：全家桶仿騰訊體育一年一度的總決賽，相信球迷用的最多的就是騰訊體育這款，剛好上手，當練手就把這個仿下來。這樣剛進去的時候頁面加載時間明顯減短?？梢园我猱惒讲僮?。 Vue2.0全家桶仿騰訊體育APP 一年一度的NBA總決賽，相信球迷用的最多的就是騰訊體育這款APP，剛好上手Vue，當練手就把這個APP仿下來。 showImg(https://segmentfault.com/img/r...

fnngj 2019-08-20 17:04 評論0 收藏0
2017-06-23 前端日報

摘要：前端日報精選大前端公共知識梳理這些知識你都掌握了嗎以及在項目中的實踐深入貫徹閉包思想，全面理解閉包形成過程重溫核心概念和基本用法前端學習筆記自定義元素教程阮一峰的網絡日志中文譯回調是什么鬼掘金譯年，一個開發者的好習慣知乎專 2017-06-23 前端日報精選大前端公共知識梳理：這些知識你都掌握了嗎？Immutable.js 以及在 react+redux 項目中的實踐深入貫徹閉包思...

Vixb 2019-08-20 17:28 評論0 收藏0
vue全家桶仿某魚部分布局以及功能實現

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，也完全能夠為復雜的單頁面應用提供驅動?？梢赃M行確認收貨后刪除訂單。前言每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做...

dreamGong 2019-08-23 11:01 評論0 收藏0
Vue2 全家桶仿微信App 項目，支持多人在線聊天和機器人聊天

摘要：前言這個項目是利用工作之余寫的一個模仿微信的單頁面應用，整個項目包含個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。前言這個項目是利用工作之余寫的一個模仿微信app的單頁面應用，整個項目包含27個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用，利用socket.io實現實時聊...

iliyaku 2019-08-20 17:21 評論0 收藏0