脚本宝典收集整理的这篇文章主要介绍了Vue2.0全家桶仿腾讯课堂（移动端），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

最近在学习vue,觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正（持续更新中）。

效果预览

?在线预览：点我！！！在线预览，手机浏览或切换浏览器移动调试

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

描述@H_304_22@

前端部分

• 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

我的简历

感兴趣请点我

脚本宝典总结

以上是脚本宝典为你收集整理的Vue2.0全家桶仿腾讯课堂（移动端）全部内容，希望文章能够帮你解决Vue2.0全家桶仿腾讯课堂（移动端）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。