vue-skeleton-webpack-plugin與page-skeleton-webpack-plugin使用
安裝插件
npm install vue-skeleton-webpack-plugin
在項目中創建骨架屏展示組件
<template>
<div>
<div class="skeleton">
<div class="skeleton-head"></div>
<div class="skeleton-body">
<div class="skeleton-name"></div>
<div class="skeleton-title"></div>
<div class="skeleton-content"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'skeleton'
};
</script>
<style scoped>
.skeleton {
padding: 15px;
}
.skeleton .skeleton-head,
.skeleton .skeleton-name,
.skeleton .skeleton-title,
.skeleton .skeleton-content,
.skeleton .skeleton-content {
background: rgb(194, 207, 214);
}
.skeleton-head {
width: 33px;
height: 33px;
border-radius: 50%;
float: left;
}
.skeleton-body {
margin-left: 50px;
}
.skeleton-name{
width: 150px;
height: 30px;
margin-bottom: 10px;
}
.skeleton-title {
width: 100%;
height: 30px;
}
.skeleton-content {
width: 100%;
height: 30px;
margin-top: 10px;
}
</style>
創建骨架屏入口文件entry-skeleton.js
import Vue from 'vue'
import Skeleton from './Skeleton'
export default new Vue({
components: {
Skeleton
},
template: `
<div>
<skeleton id="skeleton1" style="display:none"/>
</div>`
})
在build目錄下創建webpack.skeleton.conf.js
'use strict';
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const config = require('../config')
const utils = require('./utils')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
function resolve(dir) {
return path.join(__dirname, dir)
}
let skeletonWebpackConfig = merge(baseWebpackConfig, {
target: 'node',
devtool: false,
entry: {
app: resolve('../src/entry-skeleton.js')
},
output: Object.assign({}, baseWebpackConfig.output, {
libraryTarget: 'commonjs2'
}),
externals: nodeExternals({
whitelist: /\.css$/
}),
plugins: []
})
// important: enable extract-text-webpack-plugin
// 重點配置
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: true
})
module.exports = skeletonWebpackConfig
如果是vue-cli腳手架創建項目,一定要注意是否開啓樣式分離
修改方案就是在webpack.skeleton.conf.js中設置如下
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: true
})
接下來在webpack.prod.conf.js和webpack.dev.conf.js plugins中引入插件
// inject skeleton content(DOM & CSS) into HTML
new SkeletonWebpackPlugin({
webpackConfig: require('./webpack.skeleton.conf'),
quiet: true,
minimize: true,
router: {
mode: 'history',
routes: [
{
path: '/client/a/Quiksns/comment', //對應使用路由
skeletonId: 'skeleton1' // 所用骨架屏的id標識
},
]
}
}),
因爲我這是第一次使用這個骨架屏,所以我讓他展示多個的方法就是寫了多個內容,如下(可能有更好,更方便的,後續修改的時候在改一下)
在頁面加載初期實現的效果
補充一個自動生成骨架屏的工具
由餓了麼團隊設計的page-skeleton-webpack-plugin
普通使用方法就直接拿examples/sale的例子用就可以,在例子中安裝插件及依賴項
npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin
這個例子使用的是基礎配置,沒有特別需求的話可以直接使用。
插件會根據 node 環境的不同,進行不同的操作,當 NODE_ENV === ‘development’ 時,插件可以執行生成和寫入骨架頁面的操作。
在目錄下的webpack.config.js文件中進行需要生成骨架屏的路由
注意:項目路由模式只支持history模式
配置完路由之後運行項目,如果你是在sale目錄下啓動sale項目的話,直接使用
npm run dev
如若是在克隆下來的根目錄下運行項目的話,使用
npm run dev:sale
運行項目後效果
如果要看生成的骨架屏效果,可以喚出操作界面,並且進行骨架屏的寫入操作
喚起方式:
在開發頁面中通過 Ctrl|Cmd + enter 呼出插件交互界面,或者在在瀏覽器的 JavaScript 控制檯內輸入toggleBar 呼出交互界面。
這一過程可能會花費 20s 左右時間,當插件準備好骨架頁面後,會自動通過瀏覽器打開預覽頁面
在操作界面可以通過二維預覽項目效果
之後通過寫入按鈕 保存骨架屏頁面
配置中還可以設置其他內容 比如骨架屏加載樣式 基礎顏色 是否loading動畫等
看文檔配置介紹就可以了。
最後你只要使用npm run build打包,項目中的dist目錄下就會生成你的骨架屏靜態頁面