aframe 与 Vue 结合使用有哪些方法？

Question

我正在使用 vue-cli。我尝试直接在 index.html 文件中添加 aframe，并将其导入到我的顶级 main.js 文件中。我就是无法让 Vue 识别 aframe 元素。

我是否在文档中遗漏了一些样板文件？

警告示例：

vue.runtime.esm.js:619 [Vue warn]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件， 确保提供“名称”选项。

Answer 1

您可以将

aframe

添加到

dependencies

中的

package.json

：

"browserify-css": "*", // required by aframe
"envify": "*",         // required by aframe
"aframe": "^1.2.0",    // aframe

将

aframe

添加到已编译的包中：

var Vue = require('vue')
var App = require('./app.vue')
require('aframe')
new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(App)
  }
})

并使用您的

<template>

中的元素：

<template>
  <div>
    <a-scene>
      <a-cylinder color="#FFC65D"></a-cylinder>
    </a-scene>
  </div>
</template>

在这个故障

中检查一下

Answer 2

• 对于开发来说，可以将 CDN 导入到您的 index.html 中
• 对于生产，建议将其添加到您的 Main.js 中

Vue 2

为了消除警告，我建议使用放置在 main.js 中的 Vue.config.ignoredElements 添加一组组件 像这样：

Vue.config.ignoredElements = [
  'a-scene',
  'a-camera',
  'a-box'
  'a-image',
]

有关组件的完整列表，请查看此存储库：aframe-components-list

我建议使用 Vue.config.ignoredElements 而不是像普通 Vue 组件一样注册 A-Frame 组件，因为它们不是 Vue 组件。

编辑 - Vue 3：

在 Vue 3 中，main.js 中的 Vue.config.ignoredElements 将不起作用。

相反，在您的 vue.config.js 文件中添加以下代码：

// vue.config.js
module.exports = {
    chainWebpack: config => {
      config.module
        .rule('vue')
        .use('vue-loader')
        .tap(options => {
          options.compilerOptions = {
            ...options.compilerOptions,
            isCustomElement: tag => tag.startsWith('a-')
          }
          return options
        })
    }
  }  

这应该涵盖以“a-”开头的自定义元素。

Answer 3

Vite（和 Vue.js 3）代码：

//vite.config.js
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("a-"),
        },
      },
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});