Heim > Artikel > Web-Frontend > So implementieren Sie den Skelettbildschirm einer Vue-Seite

So implementieren Sie den Skelettbildschirm einer Vue-Seite

php中世界最好的语言Original: 2018-05-28 11:32:473089Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie den Vue-Seiten-Gerüstbildschirm implementieren und welche Vorsichtsmaßnahmen für die Implementierung des Vue-Seiten-Gerüstbildschirms gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

Bei der Entwicklung von Webanwendungen sind diese immer von der langen Ladezeit des ersten Bildschirms betroffen. Die gängige Lösung besteht darin, den Ladebildeffekt anzuzeigen, bevor der Ladevorgang abgeschlossen ist, und einige große Unternehmen konfigurieren einen Serversatz -Side-Rendering-Architektur zur Lösung dieses Problems. Angesichts der Reihe von Problemen, die SSR lösen muss, verwenden immer mehr Apps die „Skelettbildschirm“-Methode, um die Benutzererfahrung zu verbessern.

Xiaomi Mall:

1. Analysieren Sie den Inhaltsladevorgang der Vue-Seite

Der Eintrag index.html im Vue-Projekt hat nur einfachen Inhalt:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
</head>
<body>
  <p id="root">    
  </p>
  <script type="text/javascript" src="bundle.js"></script></body>
</body>
</html>

Wenn js ausgeführt wird, wird p#root vollständig durch den von vue gerenderten Dom ersetzt.

Wir haben in p#root einen simulierten Skelettbildschirm hinzugefügt und die Netzwerkgeschwindigkeit in den Chrome-Entwicklertools angepasst:

<p id="root">
  这里是骨架屏
</p>

Daran können wir den Inhalt erkennen des Skelettbildschirms wird direkt in p#root eingefügt, um den Skelettbildschirm zu realisieren.

2. Verwenden Sie den Vue-Server-Renderer, um den Skelettbildschirm zu implementieren

Der Skelettbildschirm muss eine separate .vue-Datei sein , also müssen wir vue-server-renderer verwenden. Studenten, die sich mit serverseitigem Vue-Rendering auskennen, müssen wissen, dass dieses Plug-in das Vue-Projekt auf der Knotenseite in ein Bundle packen und dann den entsprechenden HTML-Code aus dem Bundle generieren kann.
Die erste besteht darin, das Projekt zu generieren:

.
├── build
│  ├── webpack.config.client.js
│  └── webpack.config.server.js
├── src
│  └── views
│    ├── index
│    │  └── index.vue
│    ├── skeleton
│    │  └── skeleton.vue
│    ├── app.vue
│    ├── index.js
│    └── skeleton-entry.js
├── index.html
└── skeleton.js
└── package.json

Vues serverseitiges Rendering verwendet im Allgemeinen vue-server-renderer, um das gesamte Projekt auf der Knotenseite in ein Bundle zu packen, und hier benötigen wir nur einen HTML-Code mit einem Skeleton-Bildschirm, also Es wird eine separate Skeleton-Screen--Eintragsdatei skeleton-entry.js und eine Skeleton-Screen-Paket-Webpack-Konfiguration webpack.config.server.js geben. Die Funktion von skeleton.js besteht darin, das von Webpack gepackte Bundle in . index.html

//skeleton-entry.js
import Vue from 'vue'
import Skeleton from './views/skeleton/skeleton.vue'
export default new Vue({
 components: {
  Skeleton
 },
 template: '<skeleton />'
})

rrreeDa sich die Webpack-Konfiguration des Skelettbildschirms auf der Knotenseite befindet, ist

target: 'node' erforderlich. In libraryTarget: 'commonjs2' wird der JSON-Dateiname seiner Ausgabe angegeben. Wenn Webpack ausgeführt wird, wird eine VueSSRServerPlugin-Datei im Verzeichnis /server-dist generiert. Diese Datei zeichnet den Inhalt und Stil des Skelettbildschirms auf und wird skeleton.json zur Verwendung bereitgestellt. vue-server-renderer

//webpack.config.server.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = {
 mode: process.env.NODE_ENV,
 target: 'node',
 entry: path.join(dirname, '../src/skeleton-entry.js'),
 output: {
  path: path.join(dirname, '../server-dist'),
  filename: 'server.bundle.js',
  libraryTarget: 'commonjs2'
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader'
   },
   {
    test: /\.css$/,
    use: [
     'vue-style-loader',
     'css-loader'
    ]
   }  
  ]
 },
 externals: Object.keys(require('../package.json').dependencies),
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js'
  }
 },
 plugins: [
  new VueLoaderPlugin(),
  new VueSSRServerPlugin({
   filename: 'skeleton.json'
  })
 ]
}

Beachten Sie, dass die HTML-Datei als Vorlage den Platzhalter an der Stelle hinzufügen muss, an der der Inhalt geschrieben wird Geben Sie in p#root Folgendes ein:

//skeleton.js
const fs = require('fs')
const path = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
// 读取`skeleton.json`，以`index.html`为模板写入内容
const renderer = createBundleRenderer(path.join(dirname, './server-dist/skeleton.json'), {
 template: fs.readFileSync(path.join(dirname, './index.html'), 'utf-8')
})
// 把上一步模板完成的内容写入（替换）`index.html`
renderer.renderToString({}, (err, html) => {
 fs.writeFileSync('index.html', html, 'utf-8')
})

Führen Sie schließlich

aus, um den Skelettbildschirm von Vue zu realisieren. node skeleton

Endgültig

:index.html

<p id="root">
<!--vue-ssr-outlet-->
</p>

Sehen Sie sich die Wirkung an:

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall gelesen haben Dieser Artikel und mehr Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie ein MPvue-Applet-Projekt

Schritte zur Verwendung der leichten Diagrammbibliothek von Chart.js Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Skelettbildschirm einer Vue-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So konfigurieren Sie die 404-Seite global für Vue-AnwendungenNächster Artikel：So konfigurieren Sie die 404-Seite global für Vue-Anwendungen

In Verbindung stehende Artikel

Mehr sehen