当前位置: 首页 > Web前端 > HTML

Vue2.0全家桶仿腾讯课堂(手机端)

时间:2023-04-02 18:26:42 HTML

最近在学Vue,觉得超级好用。忍不住模仿腾讯课堂练手。不妥之处请指正(持续更新中)。效果预览?在线预览:点我!!!切换浏览器在线预览、手机浏览还是手机调试?源码地址:Github??拜托我的小星星~描述SPA单页应用的前端部分,webpack构建到dist移动设备兼容性:使用flexible.js和rem处理兼容性问题VueRouter处理路由。Vue的单页应用是基于路由和组件的。路由用于设置访问路径并映射路径和组件。axios向melement-UI发起ajax请求,完成构建轮播等组件后端部分的mock模拟。一个模拟数据的平台,数据好看好用。Express是一个静态资源目录。待更新的功能是处理数据关联,使课程和课程组件可以对应显示。改用快递。使用express+mongodb保存用户状态。使用Vuex管理组件之间的状态。,实现非父子组件之间通信的具体功能实现路由结构传统的页面应用都是通过一些超链接来实现页面的切换和跳转。在vue-router单页应用中,就是路径之间的切换,也就是组件的切换。我们创建一个路由器,传入路由中的每一项都是一个路由配置,表示匹配给定地址时应该使用什么组件来渲染视图。路线:[{路径:'/',名称:'索引',组件:索引},{路径:'/分类',名称:'分类',组件:分类,子项:[{路径:'ITList',名称:'ITList',组件:ITList},{路径:'DesignList',名称:'DesignList',组件:DesignList},{路径:'LanguageList',名称:'LanguageList',组件:LanguageList},{路径:'ProfessionList',名称:'ProfessionList',组件:ProfessionList},{路径:'ExamList',名称:'ExamList',组件:ExamList},{路径:'InterestList',名称:'InterestList',组件:InterestList}]}]Vuex使用Vuex的状态存储是反应式的。当Vue组件从store中读取状态时,如果store中的状态发生变化,相应的组件将相应地高效更新。注意:Action和mutation类似,不同的是Action提交的是mutation,而不是直接改变state。动作可以包含任意异步操作。使用npminstallnpmrundev我的简历有兴趣请点我