docs: 完善快速开始实例代码

This commit is contained in:
roymondchen 2023-06-25 14:40:15 +08:00
parent 591c4d05b2
commit 9de04ddaa4
2 changed files with 33 additions and 1 deletions

2
.gitignore vendored
View File

@ -29,4 +29,4 @@ coverage
auto-imports.d.ts
components.d.ts
docs/.vitepress/cache/deps
docs/.vitepress/cache

View File

@ -121,6 +121,14 @@ app.mount("#app");
</script>
<style lang="scss">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
@ -138,6 +146,30 @@ app.mount("#app");
其中,**有四个需要注意的属性配置项**`runtimeUrl` `values` `configs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。
:::tip
如果出现```Preprocessor dependency "sass" not found. Did you install it?```那么需要install sass
```bash
npm install sass -D
```
:::
:::tip
如果是使用vite构建工具如果出现 ```Uncaught ReferenceError: global is not defined```那么需要再vite.config.js中添加如下配置
```js
{
optimizeDeps: {
esbuildOptions: {
define: {
global: 'globalThis',
},
},
},
}
```
:::
## runtimeUrl
该配置涉及到 [runtime 概念](runtime.md)tmagic-editor编辑器中心的模拟器画布是一个 iframe这里的 `runtimeUrl` 配置的,就是你提供的 iframe 的 url其中渲染了一个 runtime用来响应编辑器中的组件增删改等操作。