从头开始搭建使用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-12-06 10:47:29

    date-fns日期工具的使用方法详解

    isToday() 判断传入日期是否为今天 isYesterday() 判断传入日期是否为昨天 isTomorrow() 判断传入日期是否为 format() 日期格式化 addDays() 获得当前日期之后的日期 addHours() 获得当前时间n小时之后的时间点 addMinutes() 获得当前时间n分钟之后的时间 addMonths() 获得当前月之后n个月的月份 subDays() 获得当前时间之前n天的时间 subHours() 获得当前时间之前n小时的时间 subMinutes() 获得当前时间之前n分钟的时间 subMonths() 获得当前时间之前n个月的时间 differenceInYears() 获得两个时间相差的年份 differenceInWeeks() 获得两个时间相差的周数 differenceInDays() 获得两个时间相差的天数 differenceInHours() 获得两个时间相差的小时数 differenceInMinutes() 获得两个时间相差的分钟数

  • 2019-12-06 10:49:39

    npm 查看源 换源

    npm,cnpm,查看源,切换源,npm config set registry https://registry.npmjs.org

  • 2019-12-06 11:01:31

    npm发布包流程详解 有demo

    npm发布包步骤,以及踩过的坑(见红颜色标准): 1.注册npm账号,并完成Email认证(否则最后一步提交会报Email错误) 2.npm添加用户或登陆:npm adduser 或 npm login

  • 2019-12-06 13:16:18

    vue mixins组件复用的几种方式

    最近在做项目的时候,研究了mixins,此功能有妙处。用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似。我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? 不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦;第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰;有没有好的方法,有那就是用vue的混合插件mixins。混合在Vue是为了提出相似的数据和功能,使代码易懂,简单、清晰。

  • 2019-12-06 13:26:30

    vue的mixins混入合并规则

    混入minxins:分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时,所有混入对象的选项将混入该组件本身的选项。

  • 2019-12-06 16:50:34

    Intellij idea 如何关闭无用的提示

    Linux:Settings —> Editor —> Inspections —> General —> Duplicated Code Mac:Preferences --> Editor —> Inspections —> General —> Duplicated Code fragment 将对应的勾去掉。

  • 2019-12-09 15:36:56

    神秘的 shadow-dom 浅析,shadow-root

    顾名思义, shadow-dom,直译的话就是 影子dom ?我觉得可以理解为潜藏在黑暗中的 DOM 结构,也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话,查看 DOM 结构的时候,肯定看到过下面这样的结构:

  • 2019-12-10 11:13:50

    前端实战-基于Nuxt的SVG使用

    虽然我们在日常开发的时候,在使用iview 或者element ui等组件时,通常会包含一些常用icon;但是在面对一些特定的需求时,或者自己想high一下,这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图,但是怎么去使用这些矢量图呢。

  • 2019-12-10 11:15:08

    用CSS给SVG 的内容添加样式

    SVG图形的一个最常见用例是图标系统,其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。 使用<use>元素实例化图标或任何其它的SVG元素或图像,给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决:使用<use>引入的内容添加样式受限的问题。 但是在开始之前,我们先快速浏览一下SVG的主要结构和分组元素,然后慢慢进入use的世界中,以及shadow DOM,然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦,以及有什么好的解决方案。