krpano结合vue上手案例（一）

http://www.nanhaibo.com/bbt_tech/

原创  2017-10-28  棒棒糖科技  棒棒糖科技

现在做前端，最流行的是啥？当然是层出不穷，功能繁多的框架了。目前主流的三大前端框架：Rreact、Angular、Vue。其中vue是尤雨溪大神开发的框架，近两年vue有多火，看看他Github上的starts就知道了。vue这么流行，作为多年krpano开发者也想尝尝鲜，所以最近撸一个案例出来。通过本篇文章，你可以了解到：

    1.如何将krpano封装成组件；

    2.简单的全景组件和其他组件的结合使用；

众所周知，组件是vue的核心内容，组件的有点就是高复用性。我们首先要做的就是把通过krpano生成的全景组件化，这样就可以随时复用了。

1. 首先使用vue cli脚手架生成基本的vue项目，解构如下：

   
   

关于vue的相关知识，这里不讨论，有不明白的小伙伴可以去vue的官网查看或者自行百度教程，网上有很多关于vue的详细教程哦。

2.将全景作为静态文件资源加入vue项目中。krpano生成的全景默认文件夹是vtour，我们把整个vtour文件夹复制到vue项目中的static中。vue项目中的静态资源都是放在static文件夹中（当然也可以修改，这里不讨论）。

3.构建vtour组件。由于krpano没有提供npm包（当然也不会提供，你懂得），所以只能通过script引入相关文件。krpano最关键的是tour.js，所以需要修改index.html文件。在文件中引入tour.js。由于我们将vtour放在static中，所以路径改变了，添加如下（注意文件路径）：

...

<script src="./static/vtour/tour.js"></script>

<div id="app"></div>

<!-- built files will be auto injected -->

...

3.编写vtour组件。编写vtour组件的目的就是可以移植到其他项目中，也就是所谓的模板。在componennts目录下加入Vtour.vue文件，解构如下：

接下来就是vue组件的编写，具体的组件写法这里不讨论，有几个点需要注意：

1.在钩子函数mounted中添加嵌入函数：

embedpano({swf:"./static/vtour/tour.swf", xml:"./static/vtour/tour.xml",target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});

embedpano是全景内容的嵌入函数，挂载在id=pano的元素上，之所以在mounted函数中嵌入，是因为需要等待元素加载完成才能渲染，否则会报错。

2.因为vue组件只能有一个根元素，所以我们需要在id=pano的元素外在包裹一层，这样就可以组件中添加其他元素；

到此，一个基本的Vtour组件就写完了。然后在路由中引入文件，在router目录中的index.js中import Vtour组件，并写进路由中，如下：

这是运行：npm run dev，你会发现，全景已经成功运行，就像之前打开过全景项目一样，这样说明Vtour组件编写成功了！

组件式开发的优点不言而喻，尤其是大型项目而言，更是用起来酸爽无比。

单单一个Vtour组件似乎撑不起场面，虽然现在已经很完美了。我给Vtour写了一个显示二维码的子组件Qrcode.vue，点击二维码按钮调用子组件。

自此这个上手案例就完成了，希望大家能从中收获到一些东西。

需要的源码的小伙伴可以到github上下载，github地址为：

https://github.com/CiroLee/pano_vue

（记得给颗星哦~~！）

或公众号回复 “框架”获取预览地址

扫描二维码或者点击阅读原文预览：