我有一个从后端呈现的页面，我希望能够加载Vue 3并在没有ID的情况下挂载应用程序和组件。我被告知这并不难，但显然我的Vue功夫很弱。我以为这会是一个相当普遍的流程，或者也许我在错误的地方寻找。我确实偶然发现了petite-vue，但是使用风险自担警告对于生产版本来说是粗略的。
这就是我目前所处的位置，任何帮助都非常感谢：
预渲染标记：
<body>
<hello-world :msg="prop passed from BE"></hello-world>
</body>vue.config.js:
module.exports = {
filenameHashing: false,
runtimeCompiler: true,
transpileDependencies: true,
configureWebpack: {
devtool: "eval-source-map",
entry: {
main: "../exec.js",
},
},
productionSourceMap: true
};Exec.js（入口点）：
import HelloWorld from "./src/components/HelloWorld.vue"
import { createApp } from "vue";
import compile from "vue"
const app = createApp({})
app.mount()
app.component("HelloWorld", HelloWorld)HelloWorld.vue:
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
default: null,
},
},
name: "HelloWorld",
};
</script>
</script>
<style lang="scss">
.root {
text-align: center;
color: red;
}
</style>在写这个问题的时候，我确实注意到了一些事情。如果我加载https://unpkg.com/vue@3.2.9/dist/vue.global.js然后挂载#app，它是非破坏性的，我甚至可以看到helloworld.vue中的样式被应用，但没有模板渲染。
app.vue:
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld
},
};
</script>exec.js:
import { createApp } from "vue";
import App from "./src/App.vue"
const app = createApp(App)
app.mount("app")HTML：
<body id="app">
<hello-world :msg="prop passed from BE"></hello-world>
</body>
1条答案
按热度按时间ejk8hzay1#
您可以创建组件并将其挂载到任何您想要的DOM元素：
进一步的改进可以是将JS变量传递给props：
将变量作为prop传递给vue组件
您还可以使用Vite的
import.meta.glob自动安装任何组件，而无需任何手动导入。所以main.js看起来像这样：进一步的改进可以是在挂载元素上使用Vue或MutationObserver对挂载组件进行响应属性（在这种情况下我们不应该删除它们）。
整个项目来源：