在 Vue 中使用 aframe 有哪些方法？

Question

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

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

示例警告：

vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

您可以将 aframe 添加到 package.json 中的 dependencies:

"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>

在this glitch

中查看

Answer 2

为了开发，可以将 CDN 导入您的 index.html
对于生产，建议将其纳入您的 Main.js

Vue 2

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

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

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

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

编辑 - Vue 3：

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

相反，在您的 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-' 开头的自定义元素。

在 Vue 中使用 aframe 有哪些方法？

What are some ways to use aframe with Vue?

vue.js

aframe

vue-cli

Vue 2

编辑 - Vue 3：