越寫悅快樂之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頁面的內容，讓我們一起爲客戶創造價值，成爲更好的自己。若是我的文章對你有所啓發，那將是我莫大的榮幸。