Javascript 我是否需要（或应该）将所有Vue组件包装在包装器组件中？

我正在尝试将Webpack4.5和Vue组件组合在一起。构建很好，我在屏幕上看到了下面预期的两个组件的详细信息

创建这个基本SPA是一个非常迭代的过程，从各种来源收集的信息并不总是一致的。我最终得出以下结论：

包含一个Vue组件的HTML文件，是整个SPA的包装器 上面的Vue组件，它本身带来了实际有用的组件 有没有办法跳过包装器组件，这样我就可以直接编辑HTML文件并链接CSS样式的文件？然后我将定义一个CSS网格，并将组件放在其中

或者，保持这种方式是否有我无法预见的优势

当前项目文件：

在浏览器中打开的HTML文件 entry.js文件 Vue包装器组件infoscreen.Vue 这是我想要删除的文件，直接在上面的HTML文件中使用

<template>
    <div id="app">
        <temperature-outside></temperature-outside>
        <temperature-outside></temperature-outside>
    </div>
</template>

<script>
    import temperatureOutside from './temperatureOutside.vue'

    export default {
        name: 'infoscreen',
        components: {
            'temperature-outside': temperatureOutside
        }
    }
</script>

---

Vue组件在Vue实例的上下文中被识别。事实证明，在html中需要一个挂载点，包装或父Vue组件将挂载所有注册的子组件

---

好的，换句话说，我必须使用我在问题中提供的代码？@Woj是的，请：

'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin')


module.exports = {
    mode: 'development',
    entry: [
        './src/entry.js'
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin([{
            from: 'src/infoscreen.html',
            to: 'infoscreen.html'
        }])
    ]
}

import infoscreen from "./infoscreen.vue"
import Vue from "vue/dist/vue.js"
Vue.component("infoscreen", infoscreen)

new Vue({ el: "infoscreen" })

<template>
    <div id="app">
        <temperature-outside></temperature-outside>
        <temperature-outside></temperature-outside>
    </div>
</template>

<script>
    import temperatureOutside from './temperatureOutside.vue'

    export default {
        name: 'infoscreen',
        components: {
            'temperature-outside': temperatureOutside
        }
    }
</script>

<template>
<div>
  hello {{yo}}
</div>
</template>

<script>
export default {
  name: 'temperatureOutside',
  data: function () {
    return {
      yo: "world"
    }
  }
}
</script>