越写悦快乐之Nuxt项目如何集成Krpano

今天的越写悦快乐系列文章为大家带来项目如何集成Krpano。Nuxt.js作为一个基于 Vue.js 的服务端渲染应用框架，其发布引发了众多开发者的追捧。使用它可以高效地为你的Vue.js应用提供SSR支持，也可以作为SPA页面单独发布。而Krpano软件作为全局软件中的佼佼者，我们这篇文章为大家介绍如何在Nuxt项目中集成Krpano，让我们开始吧。

开发环境

• Window 10.0.17763
• Node 10.18.0
• Visual Studio Code 1.48.2
• Vue 2.6.12
• Nuxt 2.14.5

特别说明

本项目是将Krpano生成的全景目录（tour）放入Nuxt项目的static目录，以便可以直接查看全景图片或者视频。

接入步骤

创建项目

我们可以通过create-nuxt-app来创建项目：

npx create-nuxt-app <my-project>

<my-project>是您的项目名称

执行以上命令后会进入交互模式，让你选择项目的基本信息，比如项目名称、编程语言、包管理工具、UI框架、模块支持、Linting工具、渲染模式等，选择完成后即可生成项目目录，生成项目的截图如下：

添加Krpano目录

我们将Krpano生成的Tour目录复制到static目录，截图如下：

编写Pano组件

在我们的VSCode编辑器中，定位到pages目录下，点击右键创建Pano组件，文件命名为pano.vue，然后写入文件内容：

<template>
  <div id="pano"></div>
</template>

<script>
let krpano = null

// eslint-disable-next-line camelcase
function krpanoOnReadyCallback(krpanoInterface) {
  // eslint-disable-next-line no-unused-vars
  krpano = krpanoInterface
}

export default {
  mounted() {
    // eslint-disable-next-line no-undef
    embedpano({
      xml: 'krpano/tour.xml',
      target: 'pano',
      html5: 'only',
      mobilescale: 1.0,
      passQueryParameters: true,
      consolelog: true,
      onready: krpanoOnReadyCallback,
    })
  },
}
</script>

<style>
#pano {
  width: 100%;
  height: 100%;
}
</style>

查看渲染结果

编写完成组件后，在终端执行yarn dev命令，然后Nuxt会自动读取pages下的文件并生成相应的路由地址，此时我们在index.vue文件中加载一个NuxtLink到Pano页面，完成后即可看到Krpano页面。

参考

• Krpano
• Nuxt.js

个人收获及感想

我们的文章从Krpano的嵌入入手，通过配置文件设置载入脚本，然后定位到Krpano容器来显示全景图片，这样的话我们可以通过URL的方式快速构建全景图片、视频、开屏动画等。我相信随着对Krpano的深入了解，我们会更加容易地定制Krpano页面的内容，让我们一起为客户创造价值，成为更好的自己。若是我的文章对你有所启发，那将是我莫大的荣幸。