So implementieren Sie einen einzelnen Seitenskelettbildschirm in Vue

Dieser Artikel führt Sie hauptsächlich in die Praxis des Vue-Einzelseiten-Skelettbildschirms ein. Der Artikel stellt ihn anhand von Beispielcodes ausführlich vor. Er bietet einen gewissen Referenz-Lernwert für alle, die Vue benötigen Es kann unten kommen. Werfen wir einen Blick darauf.

Einführung in den Skelettbildschirm

Die Hauptfunktion des Skelettbildschirms besteht darin, grundlegende Platzhalter bereitzustellen, wenn die Netzwerkanforderung langsam ist und wann Das Laden der Daten ist abgeschlossen. Stellen Sie die Datenanzeige wieder her. Dies ermöglicht Benutzern einen natürlichen Übergang und führt nicht dazu, dass die Seite für längere Zeit leer bleibt oder flackert. Zu den gängigen Lösungen zur Implementierung von Skelettbildschirmen gehören serverseitiges SSR-Rendering und Prerender.

Hier zeigen wir Ihnen hauptsächlich, wie Sie einen solchen Skelettbildschirm Schritt für Schritt durch Code erstellen:

Prerender-Rendering-Skelettbildschirm

Die Implementierung des Skelettbildschirms dieser Komponentenbibliothek basiert ebenfalls auf Pre-Rendering. Eine ausführlichere Einführung in das Pre-Rendering finden Sie in diesem Artikel: Eine andere Möglichkeit, damit umzugehen Vue Single-Page Meta SEO Im Folgenden stellen wir hauptsächlich die Implementierungsschritte vor. Zuerst müssen wir auch das Webpack-Plugin konfigurieren, aber das implementierte Prerender-Spa-Plugin ist bereits verfügbar

var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
module.exports = {
 // ...
 plugins: [
 new PrerenderSpaPlugin(
 // Absolute path to compiled SPA
 path.join(__dirname, '../dist'),
 // List of routes to prerender
 ['/']
 )
 ]
}

Dann schreiben wir unsere Skelett-Bildschirmdatei main.skeleton.vue

 <template>
 <p class="main-skeleton">
 <w-skeleton height="80px"></w-skeleton>
 <p>
 <p class="skeleton-container">
 <p class="skeleton">
  <w-skeleton height="300px"></w-skeleton>
 </p>
 <w-skeleton height="45px"></w-skeleton>
 </p>
 <p class="skeleton-bottom">
 <w-skeleton height="45px"></w-skeleton>
 </p>
 </p>
 </p>
</template>

Wenn wir die Seite zum ersten Mal betreten, müssen wir den Skelettbildschirm anzeigen. Nachdem die Daten geladen wurden, müssen wir den Skelettbildschirm entfernen:

 <template>
 <p id="app">
 <mainSkeleton v-if="!init"></mainSkeleton>
 <p v-else>
 <p class="body"></p>
 </p>
 </p>
</template>
<script>
 import mainSkeleton from &#39;./main.skeleton.vue&#39;
 export default {
 name: &#39;app&#39;,
 data () {
 return {
 init: false
 }
 },
 mounted () {
 // 这里模拟数据请求
 setTimeout(() => {
 this.init = true
 }, 250)
 },
 components: {
 mainSkeleton
 }
 }
</script>

SSR-Rendering-Skelettbildschirm

Unten verwende ich die Pinselführung meines Seelenmalers, um den allgemeinen Prozess zu zeichnen:

Erstellen Sie zuerst unsere Skeleton.entry.js

import Vue from 'vue';
import Skeleton from './skeleton.vue';
export default new Vue({
 components: {
 Skeleton
 },
 template: &#39;<skeleton />&#39;
});

Natürlich erstellt die Skeleton.vue hier die Skeleton-Bildschirmkomponente, die wir im Voraus geschrieben haben, die so aussehen könnte:

 <template>
 <p class="skeleton-wrapper">
 <header class="skeleton-header"></header>
 <p class="skeleton-block"></p>
 </p>
</template>

Was dann? Wir müssen Skeleton.entry.js auf dem Server kompilieren. Rendern Sie die verfügbaren Bundle-Dateien. Daher benötigen wir eine webpack.ssr.conf.js-Datei, die den Skeleton-Bildschirm kompiliert:

const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const nodeExternals = require('webpack-node-externals');
function resolve(dir) {
 return path.join(__dirname, dir);
}
module.exports = merge(baseWebpackConfig, {
 target: 'node',
 devtool: false,
 entry: {
 app: resolve('./src/skeleton.entry.js')
 },
 output: Object.assign({}, baseWebpackConfig.output, {
 libraryTarget: 'commonjs2'
 }),
 externals: nodeExternals({
 whitelist: /\.css$/
 }),
 plugins: []
});

Der nächste letzte Schritt ist Schreiben Sie unser WebpackPlugin. Wir hoffen, dass unser WebpackPlugin Ihnen helfen kann. Wir kompilieren die Eintragsdatei in ein Bundle, rendern das Bundle dann über den Vue-Server-Renderer und erstellen schließlich das Antwort-HTML-Fragment und das CSS-Fragment 🎜>

 // webpack start to work
 var serverCompiler = webpack(serverWebpackConfig);
 var mfs = new MFS();
 // output to mfs
 serverCompiler.outputFileSystem = mfs;
 serverCompiler.watch({}, function (err, stats) {

 if (err) {
  reject(err);
  return;
 }
 stats = stats.toJson();
 stats.errors.forEach(function (err) {
  console.error(err);
 });
 stats.warnings.forEach(function (err) {
  console.warn(err);
 });
 var bundle = mfs.readFileSync(outputPath, 'utf-8');
 var skeletonCss = mfs.readFileSync(outputCssPath, 'utf-8');
 // create renderer with bundle
 var renderer = createBundleRenderer(bundle);
 // use vue ssr to render skeleton
 renderer.renderToString({}, function (err, skeletonHtml) {
  if (err) {
  reject(err);
  }
  else {
  resolve({skeletonHtml: skeletonHtml, skeletonCss: skeletonCss});
  }
 });
 });

Im letzten Schritt verarbeiten wir die Ausgabe. Die HTML-Fragmente und CSS-Fragmente werden zusammengesetzt, um das endgültige HTML zu erzeugen, daher müssen wir die Ereignisse überwachen, bevor das Webpack kompiliert und gemountet wird:

compiler.plugin('compilation', function (compilation) {
 // add listener for html-webpack-plugin
 compilation.plugin('html-webpack-plugin-before-html-processing', function (htmlPluginData, callback) {
 ssr(webpackConfig).then(function (ref) {
  var skeletonHtml = ref.skeletonHtml;
  var skeletonCss = ref.skeletonCss;
  // insert inlined styles into html
  var headTagEndPos = htmlPluginData.html.lastIndexOf(&#39;</head>&#39;);
  htmlPluginData.html = insertAt(htmlPluginData.html, ("<style>" + skeletonCss + "</style>"), headTagEndPos);

  // replace mounted point with ssr result in html
  var appPos = htmlPluginData.html.lastIndexOf(insertAfter) + insertAfter.length;
  htmlPluginData.html = insertAt(htmlPluginData.html, skeletonHtml, appPos);
  callback(null, htmlPluginData);
 });
 });
 });

Github-Adresse: VV-UI/VV-UI

Demo-Adresse: vv-ui

Dokumentadresse: Skelett

Das Obige habe ich für Sie zusammengestellt, ich hoffe es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Detaillierte Antworten auf den Aufbau einer Webpack+Babel+React-Umgebung (ausführliches Tutorial)

Detaillierte Einführung in scss in Webpack Konfiguration

Projektkomponentenentwicklung in Vue (ausführliches Tutorial)

So implementieren Sie die Webpack-Konfiguration für die Dateipaketierung mit mehreren Einträgen

So implementieren Sie Mehrfachvererbung in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen einzelnen Seitenskelettbildschirm in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!