有时候,我们会有这样的需求,在项目的前端页面中需要使用一个swiper插件,来实现图片轮播,但是nuxt是在服务端进行编译的,那么问题来了,我们如何像在vue中那样使用第三方模块,封装轮播公用组件呢?答案是:使用nuxt到插件功能。
官方文档:
Nuxt.js允许在实例化Vue.js应用程序之前运行js插件。这在您需要使用自己的库或第三方模块时特别有用。
下面就是一个封装swiper轮播插件到用例。
...
plugins: [
{ src: ‘~/plugins/swiper.js‘, ssr: false },
{ src: ‘~/plugins/getRequest.js‘, ssr: false },
{ src: ‘~/plugins/rem.js‘, ssr: false },
]
...
import Vue from ‘vue‘
import ‘swiper/dist/css/swiper.css‘
import VueAwesomeSwiper from ‘vue-awesome-swiper/dist/ssr‘
Vue.use(VueAwesomeSwiper)
<template>
<div v-swiper:mySwiper="swiperOption">
<div>
<div v-for="(item, index) in bannerData" :key="index">
<img
:src="item.content"
:bannerSeq="item.bannerSeq"
:location1="item.location"
:sequence="item.sequence"
:remark="item.remark"
:ga-data="item.buryPoint"
alt
>
</div>
</div>
<div></div>
</div>
</template>
<script>
export default {
props: ["bannerData"],
data() {
return {
swiperOption: {
loop: true,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 0,
pagination: {
el: ".swiper-pagination",
dynamicBullets: true
},
on: {
slideChange() {
// console.log("onSlideChangeEnd", this);
},
tap() {
// console.log("onTap", this);
}
}
}
};
},
computed: {},
created() {
// 合并用户设置的参数
this.swiperOption = Object.assign(this.swiperOption, this.options);
}
};
</script>
<style lang=‘less‘>
</style>
<template>
<div>
<v-banner :bannerData="bannerData"></v-banner>
</div>
</template>
<script>
import vBanner from "@/components/web/banner";
export default {
components: {
vBanner
},
data() {
return {
bannerData: {}
};
},
// 获取banner数据
async asyncData(content) {
const res = await content.$axios.$post("/api/getFDBanner", { location: "88" });
if (res.resultCode === "1") {
return { bannerData: res.resultdata };
}
}
};
</script>
<style lang="less">
</style>
一个单页应用(通常也叫做 SPA )是一个客户端渲染的 App 。这是一个仅在浏览器端运行的应用。如果你正在使用框架,比如 React, Vue.js 或者 AngularJS ,客户端将从头开始渲染你的 App 。
随着越来越多新型前端框架的推出,SSR 这个概念在前端开发领域的流行度越来越高,也有越来越多的项目采用这种技术方案进行了实现。SSR 产生的背景是什么?适用的场景是什么?实现的原理又是什么?
最近简单的研究了一下SSR,对SSR已经有了一个简单的认知,主要应用于单页面应用,Nuxt是SSR很不错的框架。也有过调研,简单的用了一下,感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。
Vue-SSR相信大家都不陌生,与传统 SPA 相比,服务器端渲染 (SSR) 能够具备更好的SEO,方便搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,除此之外,SSR能够在更短的时间内渲染出页面内容,通过在服务端填充数据吐出到客户端的方式,让用户有更好的用户体验。
Server-side rendering (SSR)是应用程序通过在服务器上显示网页而不是在浏览器中渲染的能力。服务器端向客户端发送一个完全渲染的页面(准确来说是仅仅是 HTML 页面)
当对 React 应用进行页面加载或 SEO 优化时,我们一般绕不开 React SSR。但 React SSR 毕竟涉及到了服务端,有很多服务端特有的问题需要考虑,而限流就是其中之一。
当对 React 应用进行页面加载或 SEO 优化时,我们一般绕不开 React SSR。但 React SSR 毕竟涉及到了服务端,有很多服务端特有的问题需要考虑,而限流就是其中之一。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!