Vue3异步渲染(从后端获取未编译的Vue文件进行渲染)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
个人使用场景,将部分功能展示完全可以通过服务端自定义(暂时不考虑性能问题)
后端直接返回一个未编译的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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)