我正在尝试将Webpack 4.5和Vue组件放在一起。 构建很好，我在屏幕上看到了预期的两个组件（详情如下）。
创建这个基本SPA是一个非常迭代的过程，从各种来源收集信息（并不总是一致）。我终于结束了：
有没有办法跳过包装器组件，以便我可以直接编辑HTML文件（并链接CSS样式文件）？然后我将定义一个CSS网格并将组件放在其中。
或者保留这种方式有什么优势我无法预见？
当前项目文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<infoscreen id="infoscreen"></infoscreen>
</body>
<script src="bundle.js"></script>
</html>
'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'
}])
]
}
entry.js文件import infoscreen from "./infoscreen.vue"
import Vue from "vue/dist/vue.js"
Vue.component("infoscreen", infoscreen)
new Vue({ el: "infoscreen" })
infoscreen.vue）这是我想要删除的文件，并直接在上面的HTML文件中使用<temperature-outside></temperature-outside>
<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>
temperatureOutside.vue）<template>
<div>
hello {{yo}}
</div>
</template>
<script>
export default {
name: 'temperatureOutside',
data: function () {
return {
yo: "world"
}
}
}
</script>
答案 0 :(得分：1)
Vue组件在Vue实例的上下文中被识别。事实证明，你的html中需要一个挂载点，包装或父Vue组件将挂载所有注册的子组件。