Vue2.0全家桶仿腾讯课堂(移动端)
来源:互联网 发布:软件供应商对比表 编辑:程序博客网 时间:2024/06/05 01:00
最近在学习vue,觉得超好用,忍不住自己仿了个腾讯课堂练练手,不当之处还请大家指正(持续更新中)。http://www.tuicool.com/articles/INRz2eI
效果预览
:point_right:在线预览: 点我!!!在线预览,手机浏览或切换浏览器移动调试
:point_right:源码地址: Github :sparkles::sparkles:求你的小星星~
描述
前端部分
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
阅读全文
0 0
- Vue2.0全家桶仿腾讯课堂(移动端)
- Vue2.0全家桶仿腾讯课堂(移动端)
- Vue2.0全家桶仿腾讯体育APP
- Vue2.0全家桶仿腾讯体育APP
- 基于vue2全家桶实现的,仿移动端QQ
- 基于vue2全家桶实现的,仿移动端QQ
- 基于Vue2.js全家桶的移动端AppDEMO实现
- 基于Vue2.js全家桶的移动端AppDEMO实现
- vue2.0全家桶项目实用代码片段
- vue2.0全家桶项目实用代码片段
- 仿腾讯课堂的学生端和教师端
- vue2.0全家桶+elementui开发遇到的脑残问题
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- VUE 全家桶,vue2-vue-router-vuex-axios
- VUE 全家桶,vue2-vue-router-vuex-axios
- VUE 全家桶,vue2-vue-router-vuex-axios
- SVM支撑向量机相关
- 前端经典总结(一)
- zookeeper原理:分布式协同技术
- DG Broker switchover的过程
- LeetCode
- Vue2.0全家桶仿腾讯课堂(移动端)
- poj 1050-小白算法练习 to the max 动态规划
- 两个inline-block之间的空格去除方法
- MatlabR2014a 安装破解dll文件放置问题
- sklearn浅析(四)——Generalized Linear Models之三
- Ajax技术--检查用户名是否唯一($.get(url,data,success()))
- Laravel 自定义验证过程
- linux中帐号的管理
- USACO-Section2.2 Preface Numbering [其他]