VueSfcEditor.vue 编辑后同步源码给VuePlayground.vue组件,VuePlayground.vue组件内部使用@vue/compiler-sfc 编译源码成浏览器可执行的脚本给 Preview.vue 执行渲染。 构建属于自己的 Vue SFC Playground 2.2 渲染逻辑 Preview.vue 组件首次渲染时创建一个 iframe 容器。 监听到代码变更时,通过iframe.contentWindow.postMe...
理论上来说,iframe 有这么多缺点,应该不能成为沙箱环境的第一选择。 但历史告诉我们,凡事皆有例外,例外从Vue-SFC-Playground开始 因为我们渲染的代码的时候,这些缺点却成了邪门的优点,因为他天然的隔离性,我们可以在里面随意的渲染代码,而不用担心影响到外部的代码或者样式,并且只需要初始化一次,后续通过相互通信来实...
没有没关系,直接原理讲给你听 相比Vue2,Vue3的官方文档中新增了一个在线Playground: 打开是这样的: 相当于让你可以在线编写和运行Vue单文件组件,当然这个东西也是开源的,并且发布为了一个npm包,本身是作为一个Vue组件,所以可以轻松在你的Vue项目中使用: import{Repl}from'@vue/repl'import'@vue/repl/style.css...
README.md 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 # Vue 3 + TypeScript + Vite This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `` SFCs, check out the [script setup docs](https://v3.vuejs. org/api/sfc...
Vue SFC Playground 有一个import map功能,在这个文件中可通过在线 cdn 的方式引入外部库,然后在组件中使用。 每个库对应的 cdn 文件,一般可以在unpkg这个网站上找到。 但是这个网站没有提供搜索库的功能,所以如果你不知道怎么去找到你需要的库的具体的路径,你可以有以下2个办法: ...
相比Vue2,Vue3的官方文档中新增了一个在线Playground: 打开是这样的: 相当于让你可以在线编写和运行Vue单文件组件,当然这个东西也是开源的,并且发布为了一个npm包,本身是作为一个Vue组件,所以可以轻松在你的Vue项目中使用: import{Repl}from'@vue/repl'import'@vue/repl/style.css'<template><Repl/></template...
相比Vue2,Vue3的官方文档中新增了一个在线Playground: 打开是这样的: 相当于让你可以在线编写和运行Vue单文件组件,当然这个东西也是开源的,并且发布为了一个npm包,本身是作为一个Vue组件,所以可以轻松...
从本质上讲,Vue Playground首先要依赖Vue的响应式原理。Vue通过`Object.defineProperty`或者`Proxy`来进行数据劫持,当数据发生变化时,能够自动更新与之关联的DOM元素。在Playground中,这个特性被充分利用,用户输入的Vue组件代码中的数据状态改变能够实时地反映在展示界面上。 另外,它需要处理代码的编译和解析。它会获取用户...
NutUI Playground 实现 一、全局注册 NutUI 组件与样式 首先,正如在本地项目中使用 NutUI 那样,我们需要在 Vue 的入口文件中注册组件,并引入对应组件的样式。作为一个 Playground 站点,我们需要将所有组件注册为全局组件,并引入全量的样式文件。 注册所有组件的脚本: js 复制代码 // install.jsimportNutUIfrom'@...
组件库的Playground就是要搭建一个应用页面,可以实时预览某个组件库的组件,可以通过它快速了解和尝试每一个组件! Vue 官方开源的Playground的组件---@vue/repl,参考文档:github.com/vuejs/repl#。 2 如何搭建OpenTiny组件库的playground的指导 今天的内容就是:搭建一个OpenTiny组件库的演练场。本次任务需要你熟悉...