Javascript Rails 6和Vue组件

我在Vue中有一个应用程序，正在运行。但是如果我将它添加到Rails中，我不知道如何创建组件（我有很多组件，使用

v-for

）。在我的独立代码中

import { createApp } from 'vue'
import App from './App.vue'
import Bar from './components/Bar.vue';

const app = createApp(App);

app.component('light-bar', Bar);

app.mount("#light-bars");

但我无法在Rails

javascript/packs/light\u bar.js

中创建这样的组件

请问，如何在Rails Java脚本中创建组件？我的

light_bar.js

看起来像：

import Vue from 'vue'
import App from '../light-bars/app.vue'
import Bar from '../light-bars/components/Bar.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App),
    components: {
      'light-bar': Bar
    }
  }).$mount('#light-bars');

  console.log(app);
});

import Vue from 'vue'
import App from '../light-bars/app.vue'
import Bar from '../light-bars/components/Bar.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App),
    components: {
      'light-bar': Bar
    }
  }).$mount('#light-bars');

  console.log(app);
});

我还尝试在我的应用程序中导入并注册组件，如下所示

import Bar from './components/Bar.vue'
export default {
  name: 'App',
  data() {
    return {
      barsData: []
    };
  },
  components: {
    'light-bar': Bar
  }
...

<template>
  <div class="container">
    <h3>Úrovně osvětlení pro různé situace</h3>
    <div class="row">
      <light-bar
        v-for="bar in barsData"
          :key="bar.id"
          :luxRange="bar.luxRange"
          :luxRangeName="bar.luxRangeName"
          :luxLevel="bar.luxLevel"
          :compensation="bar.compensation"
      ></light-bar>
    </div>
</div>
</template>

模板是这样的

import Bar from './components/Bar.vue'
export default {
  name: 'App',
  data() {
    return {
      barsData: []
    };
  },
  components: {
    'light-bar': Bar
  }
...

<template>
  <div class="container">
    <h3>Úrovně osvětlení pro různé situace</h3>
    <div class="row">
      <light-bar
        v-for="bar in barsData"
          :key="bar.id"
          :luxRange="bar.luxRange"
          :luxRangeName="bar.luxRangeName"
          :luxLevel="bar.luxLevel"
          :compensation="bar.compensation"
      ></light-bar>
    </div>
</div>
</template>

Úrovněosvětlenípro různésituace

---

但没有出现任何组件。我做错了什么？我知道了。但有点奇怪，我在两个地方都注册了这个组件，在

packs/lightbar.js

和我的应用程序中

import Bar from './components/Bar.vue';
export default {
  name: 'App',
  data() {
    return {
      barsData: []
    };
  },
  components: {
    'light-bar': Bar
  },
...

及

---

我想出来了。但有点奇怪，我在两个地方都注册了这个组件，在

packs/lightbar.js

和我的应用程序中

import Bar from './components/Bar.vue';
export default {
  name: 'App',
  data() {
    return {
      barsData: []
    };
  },
  components: {
    'light-bar': Bar
  },
...

及