Vue에서 단일 페이지 스켈레톤 화면을 구현하는 방법

이 글은 Vue 단일 페이지 스켈레톤 화면의 실습에 대한 관련 정보를 주로 소개하며, Vue를 필요로 하는 모든 사람이 학습하거나 사용할 수 있도록 샘플 코드를 통해 매우 자세하게 소개합니다. 함께 읽어보세요.

스켈레톤 화면 소개

스켈레톤 화면의 주요 기능은 네트워크 요청이 느릴 때 기본 자리 표시자를 제공하는 것입니다. 데이터 로딩이 완료되면 데이터 표시가 다시 시작됩니다. 이는 사용자에게 자연스러운 전환을 제공하고 페이지가 오랫동안 공백이거나 깜박이는 현상을 발생시키지 않습니다. 일반적인 스켈레톤 화면 구현 솔루션에는 SSR 서버 측 렌더링 및 사전 렌더링이 포함됩니다.

여기에서는 주로 코드를 통해 이러한 스켈레톤 화면을 만드는 방법을 단계별로 보여줍니다.

prerender 스켈레톤 화면 렌더링

이 구성 요소 라이브러리의 스켈레톤 화면 구현도 기반입니다. 사전 렌더링에 대한 자세한 소개는 Vue 단일 페이지 Meta SEO를 처리하는 또 다른 방법을 참조하세요. 아래에서는 주로 웹팩 구성 단계를 소개합니다. 플러그인이지만 이미 prerender-spa 구현이 있습니다. -플러그인을 사용할 수 있습니다.

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>
 <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 'vue';
import Skeleton from './skeleton.vue';
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('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-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, '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});
  }
 });
 });

마지막 단계는 생성된 html 조각과 css 조각은 최종 html을 생성하므로 webpack의 컴파일 및 마운트를 모니터링해야 합니다. 이벤트:

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 주소: VV-UI/VV-UI

Demo 주소: vv-ui

Document 주소 : Skeleton

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 글:

Webpack+Babel+React 환경 구축에 대한 자세한 답변(자세한 튜토리얼)

webpack에서 scss 관련 구성에 대한 자세한 소개

Vue에서 프로젝트 컴포넌트 개발(자세한 튜토리얼) )

웹팩 다중 항목 파일 패키징 구성 구현 방법

JavaScript에서 다중 상속 구현 방법

위 내용은 Vue에서 단일 페이지 스켈레톤 화면을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!