通过请求获取到后端定义好的Vue组件字符串如何动态渲染到页面?

我们有个需求,前端部署后可在线定义组件配置到页面使用。
具体的设计是在后台页面编辑器编写vue组件,组件代码持久化到数据库,Vue前端通过请求获取组件定义代码字符串,在需要的时候异步渲染组件。(组件不在前端项目中一起被构建)。其中组件定义和展示都是可配置的。
请大佬们给个方向?感谢。

讨论数量: 1
cnguu

可以了解下 nuxtjs 的服务端渲染原理

或者使用

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="test1">{{ message }}</div>
<div id="test2">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: '位置1'
      }
    }
  }).mount('#test1')

  createApp({
    data() {
      return {
        message: '位置2'
      }
    }
  }).mount('#test2')
</script>
1个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!