【问题标题】：What are some ways to use aframe with Vue?在 Vue 中使用 aframe 有哪些方法？
【发布时间】：2021-09-21 18:15:23
【问题描述】：

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

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

警告示例：

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

【问题讨论】：

【解决方案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

【讨论】：

【解决方案2】：

对于开发，可以将 CDN 导入 index.html
对于生产，建议在 Main.js 中使用它

Vue 2

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

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 中，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-”开头的自定义元素。

【讨论】：