Utiliser Vue pour imiter Toutiao (tutoriel détaillé)

Cet article présente principalement l'exemple détaillé de Vue imitant Toutiao et explique le code correspondant. Les amis qui sont intéressés peuvent s'y référer.

Avant-propos

Je travaille sur vue depuis un moment. J'avais envie d'utiliser vue pour écrire un terminal mobile il y a quelque temps. De plus, je ne suis pas très occupé à la fin. de l'année, j'ai donc commencé à travailler dessus il y a quelques jours. Jusqu'à présent, je peux à peine le lire

Parce que j'écris uniquement des pages frontales, j'utilise donc mock.js pour les données. afin de simuler des requêtes réelles, vous pouvez directement générer vous-même l'API dans Easy Mock
Vous pouvez également vous connecter directement au compte Easy Mock de mon projet Mot de passe :

Compte : vue-toutiao
Mot de passe : 123456

Si vous souhaitez modifier l'interface, veuillez en faire une copie et la modifier

Si vous souhaitez développer vous-même l'interface backend. Vous pouvez lire mon blog Vue + Node + Mongodb pour développer un processus de blog complet

Pile technologique :

vue + webpack + vuex + axios

Structure :

• build : configuration du webpack

• config : paramètres de configuration du projet

• src

• actifs : fichiers de ressources statiques, stockage d'images, etc.

• composants : composants couramment utilisés. Par exemple, des fenêtres pop-up, etc. . .

• directive : encapsulation d'instructions communes

• routeur : table de routage

• magasin : gestion d'état vuex

• styles : fichier de style

• utils : package de classe d'outils communs

• vues : afficher la page

• statique : fichiers statiques : store favicon.ico, etc.

• Ce projet utilise DllPlugin pour l'empaquetage, alors n'oubliez pas lorsque vous démarrez ce projet, exécutez d'abord la commande de script une fois pour générer la configuration

Démonstration de l'effet :

Quelques points de connaissances communs

1. Chargement paresseux des itinéraires

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

ou

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

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

2. L'interception de connexion

détermine si la connexion est requise via la fonction de hook beforeEach de l'itinéraire

// 如：系统设置需要登陆
{ 
  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. Commutation d'animation

Déterminez le type d'animation de commutation qu'il effectue en détectant l'attribut d'animation défini sur le routeur

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 . Lecture vidéo

Étant donné que les commandes vidéo ne peuvent pas être masquées sur IOS, nous pouvons masquer la vidéo et obtenir l'effet de lecture de la vidéo en dessinant une toile

5. . L'icône adoptée est le vecteur Alibaba

6 mock.js

7. ci-dessus, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Comment gérer le problème de la non-mise à jour de la vue lorsque les propriétés de l'objet changent dans la vue ?

Problèmes avec la conversion px et rem pour différentes adaptations d'écran dans vue2.0

Comment implémenter le glisser-déposer de fichiers avec la barre de progression dans la fonction Vue Upload

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!