Vue2.0全家桶仿腾讯课堂（移动端）

anquan 发布于2019-08-01 17:01 / 848人阅读

摘要：最近在学习觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于，不同在于提交的是，而不是直接变更状态。

最近在学习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

我的简历

感兴趣请点我

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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全家桶仿某鱼部分布局以及功能实现

摘要：在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做学习用途。另一方面，当与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页面应用提供驱动。可以进行确认收货后删除订单。前言每次写文章时，总会觉得比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是可以复盘一下自己的开发过程，对自己还是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做...

dreamGong 2019-08-23 11:01 评论0 收藏0
Vue2 全家桶仿微信App 项目，支持多人在线聊天和机器人聊天

摘要：前言这个项目是利用工作之余写的一个模仿微信的单页面应用，整个项目包含个页面，涉及实时群聊，机器人聊天，同学录，朋友圈等等，后续页面还是开发中。前言这个项目是利用工作之余写的一个模仿微信app的单页面应用，整个项目包含27个页面，涉及实时群聊，机器人聊天，同学录，朋友圈等等，后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用，利用socket.io实现实时聊...

iliyaku 2019-08-20 17:21 评论0 收藏0