修复配置
parent
b440ac28ba
commit
589bb7fd45
|
|
@ -1,9 +1,16 @@
|
|||
<template>
|
||||
<div class="code-editor" ref="container"></div>
|
||||
<div class="container" ref="container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { EditorView, minimalSetup, vue, js, css, html } from '@bytedo/editor'
|
||||
import {
|
||||
EditorView,
|
||||
minimalSetup,
|
||||
vue,
|
||||
javascript,
|
||||
css,
|
||||
html
|
||||
} from '@bytedo/editor'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -13,8 +20,8 @@ export default {
|
|||
|
||||
mounted() {
|
||||
this.$view = new EditorView({
|
||||
doc: '',
|
||||
extensions: minimalSetup(vue()),
|
||||
doc: this.code,
|
||||
extensions: minimalSetup(vue(), EditorView.lineWrapping),
|
||||
parent: this.$refs.container
|
||||
})
|
||||
}
|
||||
|
|
@ -22,6 +29,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--color-plain-2);
|
||||
}
|
||||
.cm-editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<h1>it works!</h1>
|
||||
<div><a href="/playground.html">plyaground</a></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './app.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.mount('.app')
|
||||
|
|
@ -1,13 +1,54 @@
|
|||
<template>
|
||||
<CodeEditor></CodeEditor>
|
||||
<Topbar />
|
||||
<div class="playground">
|
||||
<CodeEditor :code="code" />
|
||||
<Preview />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeEditor from '@/components/code-editor.vue'
|
||||
import Topbar from './views/topbar.vue'
|
||||
import Preview from './views/preview.vue'
|
||||
|
||||
export default {
|
||||
components: { CodeEditor }
|
||||
components: { Topbar, CodeEditor, Preview },
|
||||
data() {
|
||||
return {
|
||||
code: `<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<title>{{title}}</title>
|
||||
<meta name="keywords" content="{{keywords}}">
|
||||
<meta name="description" content="{{description}}">
|
||||
<link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css">
|
||||
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
|
||||
<script type="importmap">{{importmap}}<\/script>
|
||||
<\/head>
|
||||
<body>
|
||||
<div class="app noselect"></div>
|
||||
<script src="main.js"><\/script>
|
||||
<\/body>
|
||||
<\/html>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
|
||||
.playground {
|
||||
display: flex;
|
||||
height: calc(100vh - 48px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ import store from './store'
|
|||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router).use(store).mount('.app')
|
||||
app.use(store).mount('.app')
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
content: '这是关于我们页面'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<h1>{{content}}</h1>
|
||||
<cite>当前vue-live版本: v{{$store.version}}</cite>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<main class="preview"></main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
content: '欢迎访问~~ 这是首页'
|
||||
}
|
||||
|
|
@ -9,9 +12,9 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<h1>{{content}}</h1>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.preview {
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<header class="topbar noselect">
|
||||
<a class="logo">@bd/ui playground</a>
|
||||
|
||||
<a class="github" href="//github.com/bd-js/wcui" target="_blank">github</a>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--color-plain-2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
color: var(--color-red-2);
|
||||
}
|
||||
|
||||
.github {
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,6 +12,10 @@ export default {
|
|||
}
|
||||
},
|
||||
pages: {
|
||||
index: {
|
||||
entry: resolve('./src/pages/index/main.js'),
|
||||
title: 'home page'
|
||||
},
|
||||
playground: {
|
||||
entry: resolve('./src/pages/playground/main.js'),
|
||||
title: '@bd/ui Playground'
|
||||
|
|
|
|||
Loading…
Reference in New Issue