修复配置
parent
b440ac28ba
commit
589bb7fd45
|
|
@ -1,9 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="code-editor" ref="container"></div>
|
<div class="container" ref="container"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { EditorView, minimalSetup, vue, js, css, html } from '@bytedo/editor'
|
import {
|
||||||
|
EditorView,
|
||||||
|
minimalSetup,
|
||||||
|
vue,
|
||||||
|
javascript,
|
||||||
|
css,
|
||||||
|
html
|
||||||
|
} from '@bytedo/editor'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -13,8 +20,8 @@ export default {
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$view = new EditorView({
|
this.$view = new EditorView({
|
||||||
doc: '',
|
doc: this.code,
|
||||||
extensions: minimalSetup(vue()),
|
extensions: minimalSetup(vue(), EditorView.lineWrapping),
|
||||||
parent: this.$refs.container
|
parent: this.$refs.container
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -22,6 +29,11 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.container {
|
||||||
|
width: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-right: 1px solid var(--color-plain-2);
|
||||||
|
}
|
||||||
.cm-editor {
|
.cm-editor {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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>
|
<template>
|
||||||
<CodeEditor></CodeEditor>
|
<Topbar />
|
||||||
|
<div class="playground">
|
||||||
|
<CodeEditor :code="code" />
|
||||||
|
<Preview />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CodeEditor from '@/components/code-editor.vue'
|
import CodeEditor from '@/components/code-editor.vue'
|
||||||
|
import Topbar from './views/topbar.vue'
|
||||||
|
import Preview from './views/preview.vue'
|
||||||
|
|
||||||
export default {
|
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>
|
</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)
|
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>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {
|
||||||
content: '欢迎访问~~ 这是首页'
|
content: '欢迎访问~~ 这是首页'
|
||||||
}
|
}
|
||||||
|
|
@ -9,9 +12,9 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<style lang="scss" scoped>
|
||||||
<main>
|
.preview {
|
||||||
<h1>{{content}}</h1>
|
width: 50%;
|
||||||
</main>
|
flex-shrink: 0;
|
||||||
</template>
|
}
|
||||||
|
</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: {
|
pages: {
|
||||||
|
index: {
|
||||||
|
entry: resolve('./src/pages/index/main.js'),
|
||||||
|
title: 'home page'
|
||||||
|
},
|
||||||
playground: {
|
playground: {
|
||||||
entry: resolve('./src/pages/playground/main.js'),
|
entry: resolve('./src/pages/playground/main.js'),
|
||||||
title: '@bd/ui Playground'
|
title: '@bd/ui Playground'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue