vue-ssr之nuxt.js的插件使用

更新日期: 2019-02-19阅读: 5.3k标签: SSR

有时候,我们会有这样的需求,在项目的前端页面中需要使用一个swiper插件,来实现图片轮播,但是nuxt是在服务端进行编译的,那么问题来了,我们如何像在vue中那样使用第三方模块,封装轮播公用组件呢?答案是:使用nuxt到插件功能。


官方文档:
Nuxt.js允许在实例化Vue.js应用程序之前运行js插件。这在您需要使用自己的库或第三方模块时特别有用。

下面就是一个封装swiper轮播插件到用例。


在nuxt.config.js文件中进行如下配置

...
plugins: [
    { src: ‘~/plugins/swiper.js‘, ssr: false },
    { src: ‘~/plugins/getRequest.js‘, ssr: false },
    { src: ‘~/plugins/rem.js‘, ssr: false },
]
...


在plugins文件夹下新建swiper.js文件,并进行如下编辑

import Vue from ‘vue‘
import ‘swiper/dist/css/swiper.css‘
import VueAwesomeSwiper from ‘vue-awesome-swiper/dist/ssr‘

Vue.use(VueAwesomeSwiper)


在components文件下面新建banner.vue文件,创建组件

<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>

链接: https://fly63.com/article/detial/2056

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

一个单页应用(通常也叫做 SPA )是一个客户端渲染的 App 。这是一个仅在浏览器端运行的应用。如果你正在使用框架,比如 React, Vue.js 或者 AngularJS ,客户端将从头开始渲染你的 App 。

React 中同构(SSR)原理脉络梳理

随着越来越多新型前端框架的推出,SSR 这个概念在前端开发领域的流行度越来越高,也有越来越多的项目采用这种技术方案进行了实现。SSR 产生的背景是什么?适用的场景是什么?实现的原理又是什么?

手把教你搭建SSR(vue/vue-cli + express)

最近简单的研究了一下SSR,对SSR已经有了一个简单的认知,主要应用于单页面应用,Nuxt是SSR很不错的框架。也有过调研,简单的用了一下,感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。

基于Vue-SSR优化方案归纳总结

Vue-SSR相信大家都不陌生,与传统 SPA 相比,服务器端渲染 (SSR) 能够具备更好的SEO,方便搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,除此之外,SSR能够在更短的时间内渲染出页面内容,通过在服务端填充数据吐出到客户端的方式,让用户有更好的用户体验。

一文带你搞懂 SSR

Server-side rendering (SSR)是应用程序通过在服务器上显示网页而不是在浏览器中渲染的能力。服务器端向客户端发送一个完全渲染的页面(准确来说是仅仅是 HTML 页面)

React SSR 之为什么要进行限流

当对 React 应用进行页面加载或 SEO 优化时,我们一般绕不开 React SSR。但 React SSR 毕竟涉及到了服务端,有很多服务端特有的问题需要考虑,而限流就是其中之一。

React SSR 之限流

当对 React 应用进行页面加载或 SEO 优化时,我们一般绕不开 React SSR。但 React SSR 毕竟涉及到了服务端,有很多服务端特有的问题需要考虑,而限流就是其中之一。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!