Vueでシングルページのスケルトン画面を実装する方法-jsチュートリアル-php.cn

Vueでシングルページのスケルトン画面を実装する方法

亚连

リリース： 2018-06-20 18:09:06

オリジナル

2702 人が閲覧しました

この記事では、Vue の単一ページのスケルトン画面の実践に関する関連情報を、サンプルコードを通じて詳しく紹介します。Vue を必要とするすべての人にとって、学習の参考になる価値があります。一緒に読んでみてください。

スケルトン画面の紹介

スケルトン画面の主な機能は、ネットワークリクエストが遅い場合に基本的なプレースホルダーを提供することです。データのロードが完了すると、データの表示が再開されます。これにより、ユーザーは自然な移行を行うことができ、ページが長時間空白になったりちらついたりすることはありません。一般的なスケルトン画面実装ソリューションには、SSR サーバー側レンダリングとプリレンダリングが含まれます。

ここでは主に、このようなスケルトン画面を作成する方法をコードを通じて段階的に示します:

prerender スケルトン画面のレンダリング

このコンポーネントライブラリのスケルトン画面の実装もベースになっています。プリレンダリングの詳細については、次の記事を参照してください: Vue の単一ページメタ SEO に対処する別の方法まず、webpack を構成する必要があります。プラグインですが、すでに prerender-spa の実装があります -plugin が利用可能です

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

ログイン後にコピー

次に、スケルトン画面ファイル 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>

ログイン後にコピー

初めてページに入るときに、スケルトン画面を表示する必要があります。データがロードされた後、スケルトン画面を削除する必要があります:

 <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 がスケルトン画面をレンダリングします

以下では、私のソウルペインターの筆致を使用して一般的なプロセスを描画します:

最初に作成します私たちのskeleton.entry.js

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

ログイン後にコピー

もちろん、ここでskeleton.vueを使用すると、次のステップに進むことができます。書かれたスケルトン画面コンポーネントは次のようになります:

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

ログイン後にコピー

次に、必要なのは、skeleton.entry.jsをバンドルファイルにコンパイルすることです。はサーバー側のレンダリングに使用できるため、スケルトン画面の .conf.js ファイルをコンパイルする webpack.ssr が必要です。

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

ログイン後にコピー

次の最後のステップは、webpackPlugin を作成することです。webpackPlugin が役立つことを願っています。エントリファイルをバンドルにコンパイルし、vue-server-renderer を通じてバンドルをレンダリングします。最終的な成果物応答 HTML フラグメントと CSS フラグメントを生成するためのコアコードは、ここに掲載されています:

 // 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, &#39;utf-8&#39;);
 var skeletonCss = mfs.readFileSync(outputCssPath, &#39;utf-8&#39;);
 // 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});
  }
 });
 });

ログイン後にコピー

最後のステップは、最終的な HTML を生成するには、HTML フラグメントと CSS フラグメントが生成されるため、Webpack のコンパイルとマウントを監視する必要がありますイベント:

compiler.plugin(&#39;compilation&#39;, function (compilation) {
 // add listener for html-webpack-plugin
 compilation.plugin(&#39;html-webpack-plugin-before-html-processing&#39;, 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 アドレス: VV-UI/VV-UI

デモアドレス: vv-ui

ドキュメントアドレス: スケルトン

以上、皆さんに向けてまとめさせていただきました。

Webpack+Babel+React環境の構築に対する詳細な回答(詳細なチュートリアル)

webpackにおけるscssの関連設定の詳細な紹介

Vueでのプロジェクトコンポーネント開発(詳細なチュートリアル) )

webpack 複数エントリファイルのパッケージ化構成を実装する方法

JavaScript で多重継承を実装する方法

以上がVueでシングルページのスケルトン画面を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。