Vueの画面シングルページスケルトン練習

github 地址： VV-UI/VV-UI

デモ：VV-UI

ドキュメント住所：スケルトン

スケルトン画面表示について

主に遅いネットワーク要求にアクション画面骨格は、データローディングが完了し、復元されたデータのプレゼンテーション坪量を提供します。ユーザーにこのようなA非常に自然な移行は、ページが長い黒と白またはちらつきなどが発生しません。プログラムSSR側のレンダリングサービスの一般的なスケルトン画面の実現と事前レンダリング2つのソリューション。ここでは主にコードをあなたがそのようなスケルトン画面を作成する方法をステップバイステップで表示します：

事前レンダリング画面描画スケルトン

フレームワークコンポーネントライブラリ画面の実装は、プリレンダリングに基づいて達成することで、プリレンダリングの詳細については、記事を参照してください。もう一つのアイデア治療中のVueの単一ページのメタSEOの私たちは、まず、私たちの、その実装手順をご紹介しますまたのconfigureのWebPACK-プラグインする必要がありますが、利用できる事前レンダリング・スパ - プラグインの良い達成しています

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
      ['/']
    )
  ]
} 

その後、我々は、ファイルmain.skeleton.vueスケルトン画面を書きます

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

メニューを選択して、我々はスケルトン画面を表示する必要がある場合、データがロードされ、私たちはスケルトン画面を削除する必要がある時間を有していました：

 <template>
  <div id="app">
    <mainSkeleton v-if="!init"></mainSkeleton>
    <div v-else>
      <div class="body"></div>
    </div>
  </div>
</template>
<script>
 import mainSkeleton from './main.skeleton.vue'

  export default {
    name: 'app',
    data () {
      return {
        init: false
      }
    },
    mounted () {
      //  这里模拟数据请求
      setTimeout(() => {
        this.init = true
      }, 250)
    },
    components: {
      mainSkeleton
    }
  }
</script>

SSRスクリーンレンダリングスケルトン

今、私は私のストロークの魂のアーティストを使用し、一般的なプロセスを描きます：

まず私たちを作成しますskeleton.entry.js

import Vue from 'vue';
import Skeleton from './skeleton.vue';

export default new Vue({
    components: {
        Skeleton
    },
    template: '<skeleton />'
}); 

ここではもちろんskeleton.vue画面の骨格が組み立て我々が書かれていたのです、それは次のようになります。

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

その後、我々は必要なことができるようにすることですskeleton.entry.js、我々はコンパイルスケルトン画面を持っている必要がありますので、可能なレンダリングのバンドルファイルサーバにコンパイルwebpack.ssr.conf.jsのファイル：

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: []
});

次に、最後のステップは、私たちのwebpackPluginを書くことで、私たちは、私たちのwebpackPluginがバンドルに文書入口をコンパイルし、その後、VUE-サーバー・レンダラーによってバンドルをレンダリングするために、最終的な出力の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, '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});
            }
        });
    });

我々はマウントのWebPACKコンパイルする前にイベントをリッスンする必要があるので、最後のステップは、我々は、最終的な出力のhtml HTMLフラグメント出力、CSSフラグメントの組み立て：

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('</head>');
            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);
        });
    });
 }); 

：

著者：monkeyWang

この記事を参考記事：画面スケルトンプロジェクトVUEを追加します

参照してくださいここ出典：VVの-UI-のUI / VV

Iホーム：monkeyWang

マイクロチャンネル公共数：フロントエンドのショップの知識
時折技術記事のフロントエンドをプッシュします、してください注意を払います