您的位置:首页 > 程序下载 > 新闻资讯 >

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. 路由懒加载

1
2
3
4
5
6
7
{
  path: '/development',
  name: 'development',
  component: (resolve) => {
    require(['../views/development.vue'], resolve)
  }
}

1
2
3
4
5
6
7
const _import_ = file => () => import('views/' + file + '.vue')
 
{
  path: '/development',
  name: 'development',
  component: _import_('development')
}

2. 登陆拦截

通过路由的 beforeEach 钩子函数来判断

相关最新
最新推荐
本类推荐
程序排行