Verwenden Sie Vue, um Toutiao zu imitieren (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich das detaillierte Beispiel der Vue-Nachahmung von Toutiao vorgestellt und der entsprechende Code erläutert. Freunde, die daran interessiert sind, können darauf verweisen.

Vorwort

Ich arbeite schon seit einiger Zeit an Vue, um ein mobiles Terminal zu schreiben. Außerdem bin ich am Ende nicht sehr beschäftigt des Jahres, also habe ich vor ein paar Tagen damit begonnen, es zu lesen.

Weil ich nur Frontend-Seiten schreibe, verwende ich für Daten In Um echte Anfragen zu simulieren, können Sie die API direkt selbst in Easy Mock generieren
Sie können sich auch direkt beim Easy Mock-Konto meines Projekts anmelden. Passwort:

Konto: vue-toutiao
Passwort : 123456

Wenn Sie die Schnittstelle ändern möchten, erstellen Sie bitte eine Kopie und ändern Sie sie

Wenn Sie die Backend-Schnittstelle selbst entwickeln möchten. Sie können meinen Blog Vue + Node + Mongodb lesen, um einen vollständigen Blog-Prozess zu entwickeln

Technologie-Stack:

vue + webpack + vuex + axios

Struktur:

• Build: Webpack-Konfiguration

• config: Projektkonfigurationsparameter

• src

• Assets: statische Ressourcendateien, Speicherung von Bildern und dergleichen

• Komponenten: häufig verwendete Komponenten. Zum Beispiel Popup-Fenster usw. . .

• Direktive: gemeinsame Befehlskapselung

• Router: Routing-Tabelle

• Speicher: Zustandsverwaltung vuex

• Stile: Stildatei

• Dienstprogramme: allgemeines Werkzeugklassenpaket

• Ansichten: Seite anzeigen

• statisch: Statische Dateien: Speichern von favicon.ico usw.

• Dieses Projekt verwendet DllPlugin zum Packen. Denken Sie also daran, wenn Sie dieses Projekt starten. Führen Sie zunächst einmal den Skriptbefehl aus, um die Konfiguration zu generieren

Wirkungsdemonstration:

Ein paar allgemeine Wissenspunkte

Lazy Loading von Routen

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

oder

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

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

2. Login-Abfangen

bestimmt, ob eine Anmeldung über die beforeEach-Hook-Funktion der 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() 
  }
  
})

erforderlich ist 3. Animationsumschaltung

Bestimmen Sie, welche Art von Umschaltanimation ausgeführt wird, indem Sie das auf dem Router festgelegte Animationsattribut erkennen

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. Videowiedergabe

Da die Videosteuerelemente unter IOS nicht ausgeblendet werden können, können wir das Video ausblenden und den Effekt der Videowiedergabe erzielen, indem wir eine Leinwand zeichnen

Das Symbol verwendet Alibaba-Vektorgrafiken

6. Mock.js

7. Das Obige ist, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie gehe ich mit dem Problem um, dass die Ansicht nicht aktualisiert wird, wenn Objekteigenschaften in Vue geändert werden?

Probleme mit der px- und rem-Konvertierung für verschiedene Bildschirmanpassungen in vue2.0

So implementieren Sie das Ziehen von Dateien mit Fortschrittsbalken in der Vue-Upload-Funktion

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue, um Toutiao zu imitieren (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!