Laravel9+vue3+krpano和vite

Laravel9是基于php的最新的后端框架，在新的版本中集成了vite的热开发。vue3是广受欢迎的前端框架，基于mvvm的开发设计，带来了极大的方便。在众多的全景平台项目中，krpano应用广泛，特别是和js的可交互性，受到开发者的青睐。

一、项目目标：

服务器端采用Laravel9框架+vite。

前端采用vue3。

二、系统配置：

安装laravel9最新版本后，会自动安装vite。

服务器需要安装node和npm。

在项目中引入vue3.

参考：如何在 Laravel 9 中使用 Vite 安装 Vue 3_laravel_EUV-DevPress官方社区 (csdn.net)

三、项目方案

web.php

Route::get('/vr',function(){return view('vr');
});

vr.blade.php

在这个视图中要注意，一定不要把全景图展示容器元素<div id='pano'></div>嵌套到app容器<div ia='app'></div>中！

<!DOCTYPE html>
<html lang="en">
<head><title>vr</title><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="mobile-web-app-capable" content="yes" /><meta charset="utf-8" /><style>html { height:100%; }body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }</style><script src="/js/krpano.js"></script>
</head>
<body>
@vite('resources/js/vr.js')
<div id="app"></div>
<div id="pano" style="width:100%;height:100%;"><noscript><table style="width:100%;height:100%;"><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></noscript>
</div>
</body>
</html>

vr.js

import './bootstrap';
import {createApp} from 'vue'
import App from './Vr.vue'
createApp(App).mount("#app")

Vr.vue

<script>export default{data() {return {//krpano对象krpano: null}},methods: {krpano_onready_callback(krpano_interface){this.krpano = krpano_interface;}},mounted(){embedpano({id:'krpanoSWFObject',xml:"/tour.xml", target:"pano", html5:"only", mobilescale:1.0, passQueryParameters:"startscene,startlookat",onready:this.krpano_onready_callback})//测试与krpano XML动作的交互if(this.krpano){this.krpano.call('Test')}else{        console.log('no krpano')        }}    }
</script><style scoped>#pano{width:100%;height:100%;}
</style>

tour.xml

在tour.xml中定义了场景和动作。该文件在laravel框架的静态目录public中

<krpano>...<action name='Test'>showlog(true);trace('In xml');</action>
</krpano>

Laravel9+vue3+krpano和vite相关推荐

前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)
一.文章引导 #mermaid-svg-1aHB08JglRY7yGzA {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
Vue3.0+TypeScript+Vite
Vue3.0 + TypeScript + Vite Vue3.0+TypeScript+Vite 项目创建(推荐使用yarn包管理器) 项目结构 main.ts App.vue: Compositi ...
vue3 setup + ts + vite 项目问题解决：Cannot find module ... or its corresponding type declarations.（ts2307）
昨日我尝试使用vue3 setup + ts + vite进行vue3项目的实现,遇到此问题: Cannot find module ... or its corresponding type dec ...
Vue3之——和Vite不得不说的事
1.创建一个vite项目 npm init vite-app <project-name> cd <project-name> npm install npm run dev ...
创建vue3项目（vite+js）
创建vue3+vite+js项目 1.找到指定的工作目录,进入该目录下 2.输入创建命令 3.创建成功后,进入到项目中安装npm 4.运行项目 1.找到指定的工作目录,进入该目录下 cd + 目录路径 ...
【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架创建项目: 然后按照它的指示运行项目配置文件安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
vue3日历时间 vite + vue3 日历时间
vite + vue3日历时间 #vue3 Calendar组件日历组件选择vite + vue3 https://v3.cn.vuejs.org/guide/introduction.html ...
Vue3学习笔记 ----- Vite、Vetur、Vue-router@4、Pinia的使用
打包 – Vite 极速的服务启动,使用原生 ESM 文件,无需打包轻量快速的热重载,始终极快的模块热重载(HMR) 丰富的功能,对 TypeScript.JSX.CSS 等支持开箱即用传统打包方 ...

Laravel9+vue3+krpano和vite

Laravel9+vue3+krpano和vite相关推荐

最新文章

热门文章