vue-cli3 的vue-skeleton-webpack-plugin使用

最新推荐文章于 2024-03-11 13:59:59 发布

noal

最新推荐文章于 2024-03-11 13:59:59 发布

阅读量1.6k

点赞数 1

分类专栏：技术骨架屏文章标签： vue-cli3 骨架屏 vue-skeleton-webpack-plugin preload

本文链接：https://blog.csdn.net/m0_37499386/article/details/100931761

版权

技术同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

骨架屏

1 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 编码 -->
  <meta charset="UTF-8" />
  <!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <!-- 骨架屏 -->
  <% for (var jsFilePath of htmlWebpackPlugin.files.js) { %>
  <link rel="preload" href="<%= jsFilePath %>" as="script">
  <% } %>
  <% for (var cssFilePath of htmlWebpackPlugin.files.css) { %>
  <link rel="preload" href="<%= cssFilePath %>" as="style"
    onload="this.onload=null;this.rel='stylesheet';window.STYLE_READY=1;window.mountApp&&window.mountApp();">
  <noscript>
    <link rel="stylesheet" href="<%= cssFilePath %>">
  </noscript>
  <% } %>
  <script>!function (t) { "use strict"; t.loadCSS || (t.loadCSS = function () { }); var e = loadCSS.relpreload = {}; if (e.support = function () { var e; try { e = t.document.createElement("link").relList.supports("preload") } catch (t) { e = !1 } return function () { return e } }(), e.bindMediaToggle = function (t) { function e() { t.media = a } var a = t.media || "all"; t.addEventListener ? t.addEventListener("load", e) : t.attachEvent && t.attachEvent("onload", e), setTimeout(function () { t.rel = "stylesheet", t.media = "only x" }), setTimeout(e, 3e3) }, e.poly = function () { if (!e.support()) for (var a = t.document.getElementsByTagName("link"), n = 0; n < a.length; n++) { var o = a[n]; "preload" !== o.rel || "style" !== o.getAttribute("as") || o.getAttribute("data-loadcss") || (o.setAttribute("data-loadcss", !0), e.bindMediaToggle(o)) } }, !e.support()) { e.poly(); var a = t.setInterval(e.poly, 500); t.addEventListener ? t.addEventListener("load", function () { e.poly(), t.clearInterval(a) }) : t.attachEvent && t.attachEvent("onload", function () { e.poly(), t.clearInterval(a) }) } "undefined" != typeof exports ? exports.loadCSS = loadCSS : t.loadCSS = loadCSS }("undefined" != typeof global ? global : this);</script>
  <title></title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but vuecli3 doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app">
  </div>
  <!-- built files will be auto injected -->
</body>

</html>

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

const app = new Vue({
  components: {
    App
  },
  router,
  render: h => h(App)
});

window.mountApp = () => {
  app.$mount("#app");
};
if (process.env.NODE_ENV === "development" || window.STYLE_READY) {
  window.mountApp();
}

skeleton.js

import Vue from "vue";
import skeletonWallet from "./skeletonWallet.vue";
//import skeletonWithdraw from "./skeletonWithdraw.vue";

export default new Vue({
  components: {
    skeletonWallet,
    //skeletonWithdraw
  },
  template: `
       <div style='height: 100%;'>
           <skeleton-wallet id="skeleton1" style="display:none"/>
           <!-- <skeleton-Withdraw id="skeleton2" style="display:none"/> -->
       </div>
    `
});

skeletonWallet.vue

<template>
  <div class="skeleton-wrapper">
    <img
      width="100%"
      src="https://img-blog.csdnimg.cn/2022010710255069604.png"
    />
  </div>
</template>

<script>
export default {
  name: "Skeleton"
};
</script>

vue.config.js

const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");
module.exports = {
//此插件需要css分离
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  configureWebpack: config => {
  // 骨架屏
    config.plugins.push(
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, "./src/skeleton.js")
          }
        },
        minimize: true,
        quiet: true,
        router: {
          mode: "hash",
          routes: [
            {
              path: "/wallet", //和router.js中的路径一样就行
              skeletonId: "skeleton1" //之前的id
            },
           // {
           //   path: "/withdraw",
           //  skeletonId: "skeleton2"
           // }
          ]
        }
      })
    );
  }
}

noal

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-cli3 的vue-skeleton-webpack-plugin使用

index.html<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" />  <meta name="viewport" content...
复制链接

扫一扫