VueSfcEditor.vue 编辑后同步源码给VuePlayground.vue组件,VuePlayground.vue组件内部使用@vue/compiler-sfc 编译源码成浏览器可执行的脚本给 Preview.vue 执行渲染。 构建属于自己的 Vue SFC Playground 2.2 渲染逻辑 Preview.vue 组件首次渲染时创建一个 iframe 容器。
理论上来说,iframe 有这么多缺点,应该不能成为沙箱环境的第一选择。 但历史告诉我们,凡事皆有例外,例外从Vue-SFC-Playground开始 因为我们渲染的代码的时候,这些缺点却成了邪门的优点,因为他天然的隔离性,我们可以在里面随意的渲染代码,而不用担心影响到外部的代码或者样式,并且只需要初始化一次,后续通过相互通信来实...
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...
没有没关系,直接原理讲给你听 相比Vue2,Vue3的官方文档中新增了一个在线Playground: 打开是这样的: 相当于让你可以在线编写和运行Vue单文件组件,当然这个东西也是开源的,并且发布为了一个npm包,本身是作为一个Vue组件,所以可以轻松在你的Vue项目中使用: import{Repl}from'@vue/repl'import'@vue/repl/style.css...
package-lock.json package.json README.md tsconfig.json tsconfig.node.json vite.config.ts README.md Incompatible Web Browser WebContainers currently work in Chromium-based browsers, Firefox, and Safari 16.4. We’re hoping to add support for more browsers as they implement the necessary Web Platfor...
Vue SFC Playground 有一个import map功能,在这个文件中可通过在线 cdn 的方式引入外部库,然后在组件中使用。 每个库对应的 cdn 文件,一般可以在unpkg这个网站上找到。 但是这个网站没有提供搜索库的功能,所以如果你不知道怎么去找到你需要的库的具体的路径,你可以有以下2个办法: ...
从本质上讲,Vue Playground首先要依赖Vue的响应式原理。Vue通过`Object.defineProperty`或者`Proxy`来进行数据劫持,当数据发生变化时,能够自动更新与之关联的DOM元素。在Playground中,这个特性被充分利用,用户输入的Vue组件代码中的数据状态改变能够实时地反映在展示界面上。 另外,它需要处理代码的编译和解析。它会获取用户...
相比Vue2,Vue3的官方文档中新增了一个在线Playground: 打开是这样的: 相当于让你可以在线编写和运行Vue单文件组件,当然这个东西也是开源的,并且发布为了一个npm包,本身是作为一个Vue组件,所以可以轻松在你的Vue项目中使用: import { Repl } from '@vue/repl' import '@vue/repl/style.css' <template> <...
相比Vue2,Vue3的官方文档中新增了一个在线Playground: 打开是这样的: 相当于让你可以在线编写和运行Vue单文件组件,当然这个东西也是开源的,并且发布为了一个npm包,本身是作为一个Vue组件,所以可以轻松...
NutUI Playground 实现 一、全局注册 NutUI 组件与样式 首先,正如在本地项目中使用 NutUI 那样,我们需要在 Vue 的入口文件中注册组件,并引入对应组件的样式。作为一个 Playground 站点,我们需要将所有组件注册为全局组件,并引入全量的样式文件。 注册所有组件的脚本: js 复制代码 // install.jsimportNutUIfrom'@...