骨架屏
阿新 • • 發佈:2018-12-20
骨架屏
##骨架屏提升使用者體驗,比菊花屏、白屏使用者體驗強很多,下面就實踐怎樣搭骨架屏
使用vue-cli搭建專案,安裝依賴,使用vue-skeleton-webpack-plugin注入骨架屏。在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
##在webpack.prod.conf.js和webpack.dev.conf.js中引入外掛後,在src檔案下次建立入口檔案entry-skeleton.js
import Vue from 'vue' import Skeleton from './skeleton' export default new Vue({ components: { Skeleton }, template: ` <div> <skeleton id="skeleton" style="display:none"/> </div>` })
##和skeleton.vue檔案
<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 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>
##執行 npm run dev 就可以執行骨架屏了,npm run build打包完成了。