个人使用场景,将部分功能展示完全可以通过服务端自定义(暂时不考虑性能问题)
后端直接返回一个未编译的Vue代码(可以包含指令,插槽),前端进行渲染

官方文档翻遍了,思路完全被带偏到defineAsyncComponent和JSX渲染上了,以及官方文档提到的h渲染,都可以实现,但是效果不尽人意,尤其是render+h,用json去构建html,至少达不到我的要求。

后来想到了原生html+vue.js 的方法,直接运行html就可以在前端实现Vue语法的编译,然后搜了一下,搜到了这篇文章 给了我一些思路
在这里插入图片描述

思路有了,后面又折腾了一阵,找到了解决方案
Vue3默认就是阉割版,默认关闭运行期编译,需要打开,在相关配置文件中配置即可(下面分别是vite项目和vitepress项目的配置)

// vite.config.js配置
export default {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
}
// .vitepress/config.js配置
export default defineConfig({
  // 其他 VitePress 配置...
  vite: {
    // Vite 配置对象
    optimizeDeps: {
      include: ['vue'], // 确保 Vue 被包括在预构建依赖中
    },
    resolve: {
      alias: {
        // 配置 Vue 的别名,指向包含编译器的版本
        vue: 'vue/dist/vue.esm-bundler.js',
      },
    },
    // 如果你需要其他 Vite 配置,也可以在这里添加
  },
});

import {ref, defineProps, defineComponent } from 'vue';
const MyComponent = defineComponent({
  props: {
    data: {
      type: String,
      required: true
    }
  },
  //从后端获取以省略
  template: `
    <div>
      <h1>{{ data }}</h1>
    </div>
  `
});

//使用方法
<template>
	<MyComponent :data="scope.row"></MyComponent>
</template>

GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐