Heim > Artikel > Web-Frontend > 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.
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
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!