Vue仿今日头条实例详解

站长资源 2024/11/28 佚名

2 0 1

前言

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: 下切换
    ...
     */
    let animate = this.$router.animate || to.meta.slide
    if (!animate) {
      this.animate = '' 
    }else{
      this.animate = animate === 1 "https://github.com/cd-dongzi/vue-project/tree/master/vue-toutiao">https://github.com/cd-dongzi/vue-project/tree/master/vue-toutiao

Vue,仿今日头条

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Vue仿今日头条实例详解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

Vue仿今日头条实例详解

前言

结构：

JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能

electron demo项目npm install安装失败的解决方法

评论“Vue仿今日头条实例详解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接