如何跨多个节点项目使用vue组件？
如何跨多个节点项目使用vue组件？
提问于 2022-10-04 19:13:51
我正试图通过使用Vue3在拖放能力范围内构建一个网站构建器。因此，用户将使用画布并生成用于发布后端的配置结构。此外，服务器端将根据此配置生成静态HTML。
最终，配置将像下面一样，并且工作得很完美。配置当前只能具有HTML标记和属性。后端使用h() 函数生成dom树。
我的问题是:我是否可以使用将在服务器端生成的.vue组件？例如，客户端有一个Container.vue文件，其中包括一些交互、样式等。后端如何识别/解析这个vue文件？
更新：
基本上，我希望使用后端客户端上存在的Vue组件来生成与客户端相同的HTML字符串。(包括风格、互动等)。
目前，我可以通过下面的配置生成HTML字符串，但希望扩展/支持Vue组件本身。
注意:客户机和服务器是完全不同的项目。目前，服务器采用配置并运行createSSRApp、renderToString方法。
以下是服务器如何处理API的要点：
https://gist.github.com/yulafezmesi/162eafcf7f0dcb3cb83fb822568a6126
{
id: "1",
tagName: "main",
root: true,
type: "container",
properties: {
class: "h-full",
style: {
width: "800px",
transform: "translateZ(0)",
},
},
children: [
{
id: "9",
type: "image",
tagName: "figure",
interactive: true,
properties: {
class: "absolute w-28",
style: {
translate: "63px 132px",
},
},
},
],
}回答 1
Stack Overflow用户
发布于 2022-10-04 19:48:47
这可能会让你开始：https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app
从医生那里：
// this runs in Node.js on the server.
import { createSSRApp } from 'vue'
// Vue's server-rendering API is exposed under `vue/server-renderer`.
import { renderToString } from 'vue/server-renderer'
const app = createSSRApp({
data: () => ({ count: 1 }),
template: `<button @click="count++">{{ count }}</button>`
})
renderToString(app).then((html) => {
console.log(html)
})我猜从请求中提取模板，或者通过读取提交的Vue文件，并使用它作为template参数值
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73952625
复制相关文章
相似问题
腾讯云开发者
