越寫悅快樂之Nuxt項目如何集成Krpano

Nuxt項目 - 圖片來自我的手機

今天的越寫悅快樂系列文章為大家?guī)眄椖咳绾渭蒏rpano焰扳。Nuxt.js作為一個基于 Vue.js 的服務端渲染應用框架入录，其發(fā)布引發(fā)了眾多開發(fā)者的追捧权逗。使用它可以高效地為你的Vue.js應用提供SSR支持越庇，也可以作為SPA頁面單獨發(fā)布壹店。而Krpano軟件作為全局軟件中的佼佼者，我們這篇文章為大家介紹如何在Nuxt項目中集成Krpano陶贼，讓我們開始吧啤贩。

開發(fā)環(huán)境

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目錄，以便可以直接查看全景圖片或者視頻拜秧。

接入步驟

創(chuàng)建項目

我們可以通過create-nuxt-app來創(chuàng)建項目：

npx create-nuxt-app <my-project>

<my-project>是您的項目名稱

執(zhí)行以上命令后會進入交互模式，讓你選擇項目的基本信息章郁，比如項目名稱枉氮、編程語言志衍、包管理工具、UI框架聊替、模塊支持楼肪、Linting工具、渲染模式等惹悄，選擇完成后即可生成項目目錄春叫，生成項目的截圖如下：

項目截圖 - 圖片來自我的手機

添加Krpano目錄

我們將Krpano生成的Tour目錄復制到static目錄，截圖如下：

Krpano目錄 - 圖片來自我的手機

編寫Pano組件

在我們的VSCode編輯器中泣港，定位到pages目錄下暂殖，點擊右鍵創(chuàng)建Pano組件，文件命名為pano.vue当纱，然后寫入文件內(nèi)容：

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

查看渲染結果

編寫完成組件后呛每，在終端執(zhí)行yarn dev命令，然后Nuxt會自動讀取pages下的文件并生成相應的路由地址坡氯，此時我們在index.vue文件中加載一個NuxtLink到Pano頁面晨横，完成后即可看到Krpano頁面。

項目截圖 - 圖片來自我的手機

個人收獲及感想

我們的文章從Krpano的嵌入入手箫柳，通過配置文件設置載入腳本手形，然后定位到Krpano容器來顯示全景圖片，這樣的話我們可以通過URL的方式快速構建全景圖片悯恍、視頻叁幢、開屏動畫等。我相信隨著對Krpano的深入了解坪稽，我們會更加容易地定制Krpano頁面的內(nèi)容曼玩，讓我們一起為客戶創(chuàng)造價值，成為更好的自己窒百。若是我的文章對你有所啟發(fā)黍判，那將是我莫大的榮幸。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者