Use Vue to imitate Toutiao (detailed tutorial)

This article mainly introduces the detailed examples of Vue imitating Toutiao, and explains the relevant code. Friends who are interested in this can refer to it.

Preface

I have been working on vue for a while. I have always wanted to use vue to write a mobile terminal. In addition, I am not very busy at the end of the year, so I started working on it a few days ago. So far today, I can barely read it

Because I am purely writing front-end pages, I use mock.js for data. In order to simulate real requests, you can directly generate the API yourself in Easy Mock
You can also directly log in to the Easy Mock account of my project. Password:

Account: vue-toutiao
Password: 123456

If you want to modify the interface, please make a copy and modify it

If you want to develop the backend interface yourself. You can read my blog Vue Node Mongodb to develop a complete blog process

Technology stack:

vue webpack vuex axios

Structure:

• build: webpack configuration

• config: project configuration parameters

• src

• assets : Static resource files, storing pictures and so on

• components: Commonly used components. For example, pop-up windows, etc. . .

• directive: Common instruction encapsulation

• router: routing table

• store: state management vuex

• styles: style file

• utils: common tool class package

• views: view page

• static: Static file: store favicon.ico, etc.

• This project uses DllPlugin for packaging, so remember when starting the project , first execute the script command once to generate the configuration

Effect demonstration:

Several common knowledge points

1. Lazy loading of routes

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

or

const _import_ = file => () => import('views/' + file + '.vue')

{
  path: '/development',
  name: 'development',
  component: _import_('development')
}

2. Login interception

Determine whether login is required through the beforeEach hook function of the route

// 如：系统设置需要登陆
{ 
  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. Animation switching

Determine what kind of switching animation it does by detecting the animate attribute set on the Router

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. Video playback

Because the video controls cannot be hidden on IOS, we can hide the video and achieve the effect of playing the video by drawing canvas

5. The icon uses Alibaba vector graphics

6. mock.js

7. Easy Mock

The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone.

Related articles:

How to deal with the problem of view not updating when object properties are changed in vue?

Different screen adaptation px and rem conversion issues in vue2.0

How to implement file dragging with progress bar in Vue Upload function

The above is the detailed content of Use Vue to imitate Toutiao (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!