Nuxt项目 - 图片来自我的手机
今天的越写悦快乐系列文章为大家带来项目如何集成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目录，截图如下：
Krpano目录 - 图片来自我的手机
编写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的嵌入入手，通过配置文件设置载入脚本，然后定位到Krpano容器来显示全景图片，这样的话我们可以通过URL的方式快速构建全景图片、视频、开屏动画等。我相信随着对Krpano的深入了解，我们会更加容易地定制Krpano页面的内容，让我们一起为客户创造价值，成为更好的自己。若是我的文章对你有所启发，那将是我莫大的荣幸。
网友评论