Compile Error: Component name "Unity" should always be multi-word

[orangeagain]

您好，首先感谢您开源一个vue社区唯一的untiy webgl库！

不幸的是我按照 example.vue 里的代码编译会报错，复现步骤如下 1.新建一个vue2项目

2. 安装npm install unity-webgl
3. 把自带的 HelloWorld.vue 改成说明文档里的例子

   
   <template>
   <Unity :unity="unityContext" width="800px" height="600px" />
   </template>

然后 npm run serve 出现这么一个错误：

R:\html\hello-world\src\components\HelloWorld.vue 16:9 error Component name "Unity" should always be multi-word vue/multi-word-

请大佬不吝赐教

[Meqn]

@orangeagain 文档的例子有一处单词拼错了，我自己重新建个项目跑了一下，代码库是没有问题的。

刚跑的例子，你可以复制测试下：

<template>
  <div id="app">
    <Unity :unity="unityContext" width="800px" height="600px" />
  </div>
</template>

<script>
import UnityWebgl from 'unity-webgl'

const Unity = new UnityWebgl({
  loaderUrl: 'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.loader.js',
  dataUrl: "https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.data",
  frameworkUrl: "https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.framework.js",
  codeUrl: "https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.wasm"
})

export default {
  name: 'App',
  components: {
    Unity: UnityWebgl.vueComponent
  },
  data() {
    return {
      unityContext: Unity
    }
  }
}
</script>

[Meqn]

@orangeagain

unity-webgl 支持 原生 html页面模式 和 基于 vue2.x 和 vue3.x 的应用。

上面代码效果图：

[vipzhang123]

@Meqn 您好，我的Vue版本是3.2.23，我使用您上面的这个代码之后，报错如图：

[vipzhang123]

这是Demo，麻烦给看下呗，先谢谢了 链接：https://pan.baidu.com/s/14f-IKg5zBxgVE66VHRrssQ 提取码：hnc2

[Meqn]

@vipzhang123 Vue 3.x 目前还不能直接使用组件，我晚上写个 vue3.x的例子吧

[vipzhang123]

@Meqn 好的，麻烦了

[Meqn]

@vipzhang123 你的截图报错是因为 UnityWebgl.vueComponent 是基于 Vue 2.x 。后续我会加上支持 vue3.x 的组件。

我刚才创建了一个 基于 vue3.x的示例， 点击预览

具体代码如下：

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import UnityWebgl from 'unity-webgl';

const canvasRef = ref(null);
let unityComponent = null;

onMounted(() => {
  if (!unityComponent) {
    unityComponent = new UnityWebgl(canvasRef.value, {
      loaderUrl:
        'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.loader.js',
      dataUrl:
        'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.data',
      frameworkUrl:
        'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.framework.js',
      codeUrl:
        'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.wasm',
    });
  }
});
onBeforeUnmount(() => {
  if (unityComponent) {
    unityComponent.destroy();
    unityComponent = null;
  }
});
</script>

<template>
  <div style="width: 800px; height: 600px; border: 1px solid #f00">
    <canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" />
  </div>
</template>

[vipzhang123]

@Meqn okok，谢啦

[orangeagain]

@orangeagain 文档的例子有一处单词拼错了，我自己重新建个项目跑了一下，代码库是没有问题的。

刚跑的例子，你可以复制测试下：

<template>
  <div id="app">
    <Unity :unity="unityContext" width="800px" height="600px" />
  </div>
</template>

<script>
import UnityWebgl from 'unity-webgl'

const Unity = new UnityWebgl({
  loaderUrl: 'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.loader.js',
  dataUrl: "https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.data",
  frameworkUrl: "https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.framework.js",
  codeUrl: "https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/unity/test1/Build/OUT_BIM.wasm"
})

export default {
  name: 'App',
  components: {
    Unity: UnityWebgl.vueComponent
  },
  data() {
    return {
      unityContext: Unity
    }
  }
}
</script>

太棒了，可以跑起来了 但是 WebGL 和 js 调用放在mounted里还是不行，不知道是不是因为 const Unity = new UnityWebgl() 放在了外面的原因？能不能有一个 Untiy 实例放在 mounted 里的可以互相调用的例子？谢谢

[Meqn]

@orangeagain new UnityWebgl('el', {}) 实例化 UnityWebgl ，放在 mounted 里面和外卖都是没有任何问题的。

我这里放在外面是为了方便组织代码，可以将 实例化代码放在一个 js 文件内，然后 import 就可以了。