1. 首页
  2. Vuejs

Vue 实战篇之仿实现Vue 仿今日头条

前言

vue也弄了一段时间了, 前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了

因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,为了真实的模拟请求,可以直接在 Easy Mock 自己生成API 也可直接登陆我这项目的Easy Mock账号密码:

账号: vue-toutiao 密码: 123456

如果你想修改接口,请copy一份在修改

如果你想后台接口也自己开发的话。可以阅读我这篇博客 Vue + Node + Mongodb 开发一个完整博客流程

技术栈:

vue + webpack + vuex + axios

结构:

  • build: webpack配置
  • config: 项目配置参数
  • src assets: 静态资源文件,存放图片啥的 components: 常用组件。例如 弹窗 等等。。。 directive: 常用指令封装 router: 路由表 store: 状态管理 vuex styles: 样式文件 utils: 常用工具类封装 views: 视图页面
  • static: 静态文件: 存放 favicon.ico 等等

此项目用到了 DllPlugin 进行打包处理,所有启动该项目时记得,先执行一次该脚本命令生成配置

效果演示:

图片描述

图片描述

图片描述

图片描述

图片描述

几个常用的知识点

1. 路由懒加载


{ path: '/development', name: 'development', component: (resolve) => { require(['../views/development.vue'], resolve) } }


const _import_ = file => () => import('views/' + file + '.vue') { path: '/development', name: 'development', component: _import_('development') }

2. 登陆拦截

通过路由的 beforeEach 钩子函数来判断是否需要登陆


// 如:系统设置需要登陆 { path: '/system', name: '系统设置', meta: { login: true }, component: _import_('System/index') } router.beforeEach((to, from, next) => { if (to.meta.login) { //判断前往的界面是否需要登陆 if (store.state.user.user.name) { // 是否已经登陆 next() }else{ Vue.prototype.$alert('请先登录!') .then( () => { store.state.user.isLogin = true }) } }else{ if (to.meta.page) store.state.app.pageLoading = true next() } })

3. 动画切换

通过检测设置在 Router上的animate属性 来判断它做什么样的切换动画


Router.prototype.animate = 0 // 获取每个路由meta上面的slide 来判断它做什么动画 { path: '/system', name: '系统设置', meta: { slide: 1 }, component: _import_('System/index') } watch: { $route (to, from) { /* 0: 不做动画 1: 左切换 2: 右切换 3: 上切换 4: 下切换 > JS中文网 - 前端进阶资源教程 [www.javascriptC.com](https://javascriptc.com) 一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容 ... */ let animate = this.$router.animate || to.meta.slide if (!animate) { this.animate = '' }else{ this.animate = animate === 1 ? 'slide-left' : animate === 2 ? 'slide-right' : animate === 3 ? 'slide-top' : animate === 4 ? 'slide-bottom' : '' } this.$router.animate = 0 } }

4. 视频播放:因为在IOS上 无法隐藏video的controls ,所以我们可以隐藏video,通过绘制canvas来达到播放视频的效果

5. icon采用的是 阿里巴巴矢量图

6. mock.js

7. Easy Mock

一些更加详细的配置可在github上查看

启动步骤

  1. npm install
  2. npm run dll (DllPlugin 构建, 只需要执行一次生成manifest.json配置文件就行)
  3. npm run dev (本地开发)
  4. npm run build (生产环境打包)

因为easy mock上面的数据有时被人改动了,所以当没取到数据时,记得修改成我写的备用路径。

在线预览地址, 或可通过 chrome 控制台手机模式观看

github地址

博客地址

作者:
链接:https://juejin.im/post/5a7914386fb9a063543c0f44

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:Vue 实战篇之仿实现Vue 仿今日头条

链接:https://www.javascriptc.com/2840.html

« Airbnb:我们如何将大部分 API 迁移到 GraphQL
浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层»

相关推荐

QR code