从头开始搭建使用typescript的vue2工程并跑通本地photo-sphere-viewer

2023-09-21 16:11:36

我再uniapp上使用的photo-sphere-viewer全景组件再旧版本浏览器(chrome 64版本之下)上不能正常展示,报错_constructor的问题,怎么适配也适配不好,改组件的作者说由于他一来的three.js不支持es5了,所以他也不支持,由于这个库并不是采用我们熟悉的webpack编译的,所以我就准备搭建一个简单的工程,专门跑起来photo-sphere-viewer来寻找错误原因或者看能修改掉吗。

下面我分三步讲一讲我如何大家这个vue2的typescript(因为这个项目本身就是使用的typescript开发)工程的。


    1.首先使用vue-cli搭建一个纯洁的vue2库。(参考地址 手动搭建vue2项目工程环境[20211221]最新

       1. npm install -g @vue/cli

        2.vue create vue-cli

        3.根据提示选择手动安装 Manually select features

        4. 我的配置列表如下 

        

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) y


        5.好 一切结束,我们能跑起来一个没有错误纯洁的vue2工程了


    2. 导入Photo-Sphere-Viewer-main 核心包,这是一个最简单能跑起来全景图的配置。

        1.从github下载master包,复制出packages文件夹下面的core包到自己的vue2工程下

        2.此时typescript的检测开始生效了,报出了很多错误,我想不设置不检测typescript的错误,没找到怎么解决。

            那就一个一个的解决吧。

        3.先不去看错误,把Photo-Sphere-Viewer-main根目录中的package里面的依赖包括core包中的依赖,粘贴到我们

            工程的根目录下面。安装。

         4. 把core目录下面tscofnig.json的include 和excude 配置复制到我们的工程的tsconfig下面,并删除core根目录中所以没必要的配置文件,但是我不知道子目录的tsconfig和跟目录的tsconfig.json有多少关联,也没有考证。

        5.复制shared文件夹以及typings.d.ts文件到我们的工程,这一步解决了.svg typescript检测报错的问题。

        6.删除我们自己tsconfig.json中的 types:[webpack-env]这个配置,不知道为啥默认给这个,给了这个就不能使用node_modules/@type目录下的type声明了。这个能解决好多报错。

        7.重新运行 开始解决其他typescript的报错。

        8. 错误1号:

TS2322: Type 'null' is not assignable to type 'AdapterConstructor & typeof AbstractAdapter'.
  Type 'null' is not assignable to type 'AdapterConstructor'.

    这个 需要再tscofnig.json配置文件中添加 

"strictNullChecks": false,

就好了

        9.

ERROR in src/self_modules/core/src/adapters/interpolationWorker.ts:12:28
TS2304: Cannot find name 'OffscreenCanvas'.

        我是先在Photo-Sphere-Viewer-main中成功跑成功后,点击他里面的文件发现这个OffscreenCavas是在typescript自己的包中,我的同样的文件并没有这个属性,检查是要升级typescript到 5版本之上。

        到这里typescript的报错提示解决完毕。


    3.在APP.vue中开始写简单的全景代码

        1.出现错误  提示要安装 sass-loader,直接安装就好了。

        2.

4 │ @import '../../../shared/vars';   找不到这个,直接去原仓库找到复制过来就好了。

        3.

Cannot read properties of null (reading 'classList')
TypeError: Cannot read properties of null (reading 'classList')
    at addClasses (webpack-internal:///./src/self_modules/core/src/utils/browser.ts:44:11)
    at ZoomOutButton.__setIcon (webpack-internal:///./src/self_modules/core/src/buttons/AbstractButton.ts:180:55)
    at new AbstractButton (webpack-internal:///./src/self_modules/core/src/buttons/AbstractButton.ts:61:12)
    at new AbstractZoomButton (webpack-internal:///./src/self_modules/core/src/buttons/AbstractZoomButton.ts:25:5)
    at new ZoomOutButton (webpack-internal:///./src/self_modules/core/src/buttons/ZoomOutButton.ts:13:5)
    at eval (webpack-internal:///./src/self_modules/core/src/components/Navbar.ts:151:11)
    at Array.forEach (<anonymous>)
    at eval (webpack-internal:///./src/self_modules/core/src/components/Navbar.ts:149:34)
    at Array.forEach (<anonymous>)
    at Navbar.setButtons (webpack-internal:///./src/self_modules/core/src/components/Navbar.ts:142:13)


这个报错,没找到怎么解决,看源码,再一步步走,应该是设置菜单按钮的地方。

再view初始化的方法里面注释掉了设置button的代码就好了,

// init buttons
if (this.config.navbar) {
//    this.navbar.setButtons(this.config.navbar);
}


虽然咱这个是不带样式的全景,只是能展示不报错而已。咱的目的是解决旧浏览器的兼容问题。


好了。所有都准备完毕了,下面开始结局兼容问题。写在下篇文章了哈。

  • 2019-11-28 11:00:35

    Vue子组件调用父组件的方法

    下面有三种方法,我自己重点推荐第一种,毕竟这种简单粗暴好用好理解,不过这个有一个弊端,再组件嵌套组件的时候,尤其是用第三方组件里面调用自己的子组件的时候,其实已经是孙子组件了,这个时候就要parent.parent。。。。,这样就不好了,我们就得考虑其他方法了,具体怎么判断是父组件,还是爷爷组件,我会单独出一篇文章讲述。

  • 2019-11-29 13:04:47

    计算一个多边形的重心点坐标(准确版)

    在之前的 《如何判断一个多边形是否合法》 一文中有提到,用无人机规划飞行路线前,往往需要框选一个多边形的区域。 而在地图控件上显示这个多边形区域时,往往会遇到这样一个需求:需要把所要测绘的多边形区域移动到地图中心。 实现这个需求的基本思路就是:获取到多边形区域的重心点坐标,然后利用地图控件的 setCenter方法,就可以把地图的显示中心移动到多边形区域重心了。那么问题来了,如何求出一个多边形的重心点坐标呢?

  • 2019-11-29 13:06:27

    如何判断一个多边形是否合法

    利用无人机对一片区域进行测绘前,我们会先在地图上框选一个区域,然后再规划飞行的路线,而需要测绘的这片区域往往是一个多边形。在 MeshKit 中,我们加入了多边形区域的编辑功能,其中就涉及判断用户所编辑出来的多边形是否合法的问题。

  • 2019-11-29 13:47:22

    百度地图做电子围栏总结

    在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2019-11-29 13:50:29

    图片连接处出现白线

    block导致,只要父元素设置font-size:0或者设置img display: block; 便可。但是我设置了没有用,这条线不是所有的机型都有,而且页面滚动之后又消失,我琢磨半天,各种尝试,发现把图片高度减少(增加)1px就解决了。因为我们的项目是用postcss-px-to-viewport,我每张图片都是设置高度的,应该是数值转换出现偏差。

  • 2019-11-29 13:54:07

    粗略计算多边形中心点(并不是很准确,但简单好用)

    也是再做栅栏系统,搜索如何获取多边形中心点的问题上,发现了这个,简单易于理解,但是并不是特变准确,但也不影响使用。 后来发现了新的算法,并且百度地图也提供相应的api。 具体内容我写在了前面的文章,大家可以找一下。

  • 2019-11-29 14:20:38

    vue,vuthis.$parent算法

    由于组件嵌套,其实vue parent的位置也改变了,我们可以通过下面的图片,来看一下,parent到底什么哪一层

  • 2019-11-29 14:23:24

    百度地图 多个标记点设置最佳视角

    通过下面的语法,我们可以为不规则图形,以及过大的图形进行地图适配,更好的展示我们画的图形,当然,如果展示所有的图形,我们可以暴力的把所有的点组合起来进行展示,点过多不知道会不会影响性能,不过我们也可以从后台精简点数,不过地球是圆的,不知道好不好做。