多页面vue应用中,在请求接口之前统一加上Loading作为未请求到数据之前的过渡展示。由于多页面未使用vuex做状态管理,只在入口统一注册了bus,所以此例子使用eventbus做事件通信。
这个loading组件用showLoading控制展示与否。
<template>
<div class="loading" v-show="showLoading">
<img/>
<p>加载中...</p>
</div>
</template>
用SHOW_LOADING和HIDE_LOADING事件控制组件的显示隐藏
<script>
import { Bus, SHOW_LOADING, HIDE_LOADING } from 'utils/bus'
export default {
name: 'loading',
data () {
return {
showLoading: false
}
},
created () {
this.loadingFn()
},
methods: {
loadingFn () {
Bus.$on(SHOW_LOADING, () => {
this.showLoading = true
})
Bus.$on(HIDE_LOADING, () => {
this.showLoading = false
}
},
}
</script>
以ajax请求为例,可以在beforeSend和complete钩子函数中emit对应的隐藏和显示事件。
new Promise((resolve, reject) => {
let defaultOpt = {
url,
type: config.method || 'POST',
data: params || {},
timeout: 50000,
contentType: 'application/x-www-form-urlencoded',
dataType: json
}
defaultOpt.beforeSend = (xhr, settings) => {
if(config.setLoad){
Bus.$emit(SHOW_LOADING)
} else {
Bus.$emit(HIDE_LOADING)
}
}
defaultOpt.complete = () => {
Bus.$emit(HIDE_LOADING)
}
$.ajax(defaultOpt)
})
由于每个页面都有可能用到这个效果,这时候会在全局注册一些公共的组件,这样哪个页面需要用到,不需要重新引入,直接调用组件即可。
import Vue from 'vue'
import App from './App.vue'
import bus from 'utils/bus'
import components from 'utils/components.js'
// 注册统一的bus应用
Vue.prototype.$bus = bus
// 全局注册组件
Vue.use(components)
new Vue({
render: h => h(App)
}).$mount('#app')
import Loading from 'components/Loading.vue'
export default (Vue) => {
Vue.component('Loading', Loading),
// 其他组件
}
用的时候直接引入到需要的页面即可。
但是会有一个小小的问题,假设某个页面在created里就要请求接口,这时候Bus.$emit(SHOW_LOADING) 会无法被接收到。因为这时候Loading组件还未能加载完成,Bus.$on(SHOW_LOADING)还未能注册上。所以,临时的解决方案是将请求先放在mounted钩子里。
来自:https://segmentfault.com/a/1190000019481462
如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。
图片常见的类型有jp(e)g,png,gif,包括现在普遍使用的svg以及webp。svg作为矢量图形,有一定的使用场景,而webp作为未来web开发的趋势,有一定的使用场景,比如:爱奇艺中的轮播图(carousel)中就是用webp,但其他的见到的不多。
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。但对于有多个子项目的应用,如果创建多个单页面
公司有专门的审批系统,我现在做的后台管理系统需要接入,移动端和PC端都要有一个页面来展示业务信息。后端不给开俩项目(也确实没必要),所以打算用多页面来解决,PC和移动端放到一个项目里,然后打包到各自的文件夹
react-multi-page-app 是一个基于 webpack5 搭建的 react 多页面应用。为什么搭建多页面应用:多个页面之间业务互不关联,页面之间并没有共享的数据
现在很多脚手架基本上都是单页面入口的应用,比如create-react-app等,整个的入口就是src/index.js。即使是Next.js,可以使用next export,导出成一个个单独的 html 页面。但在编译时,依然是全量编译,作为本身是为同构直出量身定制的服务端框架
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!