全景图嵌入商品_使用VueJS将全景图嵌入您的网站

最新推荐文章于 2024-08-08 08:08:28 发布

cuk5340

最新推荐文章于 2024-08-08 08:08:28 发布

阅读量467

点赞数

文章标签： git https python docker github

原文链接：https://vuejsexamples.com/embed-panorama-into-your-website-with-vuejs/

版权

这是一个介绍如何使用VueJS创建轻量级全景图查看器的教程，大小约4.56 kB。文章涵盖了从使用npm安装到本地运行的步骤，并提供了在网页中嵌入全景图的方法。此外，还列出了一些待完成的功能，如自动旋转功能。

摘要由CSDN通过智能技术生成

全景图嵌入商品

VueJS全景查看器 (VueJS Panorama Viewer)

Embed panorama into your website (lightweight~4.56 kB) VueJS version of JQuery Panorama Viewer.

将全景图嵌入到您的网站中(轻量级〜4.56 kB)VueJS版本的JQuery Panorama Viewer。

View demo 查看演示 Download Source 下载源

入门 (Getting started)

using npm

使用npm

npm install vuejs-panorama --save

Or using script tag for global use

或使用脚本标签供全球使用

<script src="https://unpkg.com/[email protected]/dist/Panorama.js"></script>

Or Download Panorama.js and include it in your html

或下载Panorama.js并将其包含在您的html中

在本地安装和运行 (Installing & Running Locally)

Clone the repository using git:

使用git克隆存储库：

git clone https://github.com/mudin/vue-panorama.git

Installing all dependencies:

安装所有依赖项：

npm install

Build

建立

npm run build

Run locally:

在本地运行：

npm run example

This will start development server on localhost:4000

这将在本地主机上启动开发服务器：4000

用法 (Usage)

Panorama by equirectangular image

等角影像全景图

<template>
    <Panorama source="pano.jpg" caption="Awesome Panorama"/>
</template>
<script>
    import { Panorama } from 'vuejs-panorama'

    export default {
        components: { Panorama }
    }
</script>

要么

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <Panorama source="pano.jpg" caption="Awesome Panorama"/>
    </div>
    <script src="vue.js"></script>
    <script src="vuejs-panorama.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>