vue 仿今日头条_Vue仿今日头条实例详解_莺语_前端开发者
前言
因为也是纯粹的写写前端页面,所以数据方面用的是mock.
账号: vue-toutiao
密码: 123456
如果你想修改接口,请copy一份在修改
如果你想后台接口也自己开发的话。可以阅读我这篇博客 Vue +
技术栈:
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: 下切换
...
*/
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.
7. Easy Mock
代码实例:https://github.com/cd-dongzi/vue-project/tree/master/vue-toutiao
vue 仿今日头条_Vue仿今日头条实例详解_莺语_前端开发者相关推荐
- vue快速复制快捷键_vue快捷键与基础指令详解
v-bind可以简写成 : → v-on:click可以写成@click v-if实例 可以通过对对象操作条件来实现想要展示的效果 现在你看到我了 天气炎热 new Vue({ el: &quo ...
- HTML怎么在li中加select标签,Vue.js做select下拉列表的实例(ul-li标签仿select标签)_莺语_前端开发者...
目标:用ul-li标签结合 知识点: 组件的写法及运用 组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数据的绑定(v-bind) 自定义事件通信 效果图: 1.未 ...
- vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局 页面内容 在对应的组件的最外层div上加上这样的样式: .conten ...
- props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅是 ...
- vue仿今日头条_Vue仿今日头条实例详解
前言 vue也弄了一段时间了,前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了 因为也是纯粹的写写前端页面,所以数据方面用的是mock.js, ...
- php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
- android 清理缓存动画,Android仿微信清理内存图表动画(解决surfaceView屏幕闪烁问题)demo实例详解...
最近接了一个项目其中有功能要实现一个清理内存,要求和微信的效果一样.于是想到用surfaceView而不是继承view.下面小编给大家解析下实现思路. surfaceView是为了解决频繁绘制动画产生 ...
- Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,导航等)
Android百度地图实例详解之仿摩拜单车APP(包括附近车辆.规划路径.行驶距离.行驶轨迹记录,导航等) 标签: android百度地图行驶轨迹记录共享单车行驶距离和时间 2017-03-08 20 ...
- vue实现一个星级打分效果_Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
最新文章
- 分布式系统关注点:无状态
- 让asp.net程序在修改web.config后不重启
- POJ 3150 循环矩阵的应用
- 多线程小抄集(新编一)
- 常见八种安卓开发报错的方式
- 16位的数字高字节和低字节_显示8位数字的较低和较高半字节的掩蔽| 8086微处理器...
- ...android平板办公,教科书式安卓全 面屏平板:华为MatePad Pro构建智慧办公新体验...
- 【转载】登录PDMS总是切换到Monitor,这是为什么?!
- 直接拿来用!盘点四款优秀的开源协作文本编辑器
- 类 kotlin(13)
- C# 生成高清缩略图
- html标签b规定粗体文本
- 一文带你浏览Graph Transformers
- 《UNIX环境高级编程》随书代码的打开方式
- java fp-growth 算法包_java实现fp-growth算法
- Java中的关键字有哪些?
- 个人信贷不良资产管理 难题亟待解决
- Python语言程序设计(嵩天老师)-期末考核2.1-快乐数字
- Tungsten Fabric知识库丨关于OpenStack、K8s、CentOS安装问题的补充
- m2硬盘写入速度测试软件,【英特尔 600P 512G PCIE M2 SSD 固态硬盘测试总结】读写速度|空间_摘要频道_什么值得买...