qingwei-li / vuep Goto Github PK
View Code? Open in Web Editor NEW🎡 A component for rendering Vue components with live editor and preview.
Home Page: https://cinwell.com/vuep/
License: MIT License
🎡 A component for rendering Vue components with live editor and preview.
Home Page: https://cinwell.com/vuep/
License: MIT License
Like pug
and stylus
The demo at https://qingwei-li.github.io/vuep/#/#demo is not showing for me no matter how much I wait. Here's a screenshot:
Thanks!
Awesome! Thanks for the contribution!!
I noticed the sync is not two ways, e.g in the ES6 usage demo the input number will not reflect back into the code. Perhaps that could be considered?
@Keyframes antion {
0%{
margin-top: 60px;
}
50%{
margin-top: 10px;
}
100%{
margin-top: 60px;
}
}
这种的解析是不可行的,解析的结果前面会自带一个class属性,有什么解决办法吗?
没有中文文档吗
Hi, @QingWei-Li 目前只支持字符串模版吗?
后续考虑支持单文件(.vue) 模版吗?
请问可以提供一个属性,用来屏蔽代码,只展示组件吗?
Is there any way I can limit vuep to its container? Currently my users are able to run JavaScript on my entire app (rather than just within the vuep preview window).
https://codesandbox.io/s/6xk7rp0o33
When use the <script type="text/x-template">
in .vue file:
<template>
<div id="app">
<vuep template="#demo" />
<script v-pre type="text/x-template" id="demo">
<template>
<div>hello {{ name }}</div>
</template>
<script>
module.exports = {
data() {
return {
name: 'vuep'
}
}
}
</script>
</script>
</div>
</template>
// ...
Will get this error:
当前我这个项目是需要依赖其他的组件了 比如说elementui 还挂载了aioxs之类的, 里面也用到自定义指令,混入等等某些是全局的。
请问vuep这种怎么搞定 全局自定义 和混入,已经vue prototye挂载的 怎么能传递到vuep里面去?
不能绑定click事件吗?
Hi! I want to change the template inside Vuep component dynamically.
I was use Vuep template
props with Vue v-bind method to local prop called template
— :template="template"
. But if I dynamic change the content of local template - Vuep component is not changes. How I can do that?
<template>
<div id="app">
<!-- <ac-simple-card></ac-simple-card> -->
<vuep :template="code"></vuep>
</div>
</template>
<script>
import Vue from 'vue'
import Vuep from 'vuep'
import 'vuep/dist/vuep.css'
Vue.use(Vuep /*, { codemirror options } */)
export default {
name: 'LiveEditor',
created: function () {
this.code = `<template><div>Hello, {{ name }}!<ac-gravatar :avatar_props="{ size: 100, rounded: false }" email="[email protected]"/></div></template><script>module.exports = {data: function () {return { name: 'Vue' }}}`;
}
}
</script>
<style>
</style>
ERROR
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
--->
at src/components/LiveEditor.vue
at src/App.vue
I am getting above ERROR please help me, anyone,
Hi, great component, but if I use it inside nuxt.js with ssr-support (only in browser-side) backend-side vue-renderer was delete component from page and show message:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
<p>, or missing <tbody>. Bailing hydration and performing full client-side render.
https://cinwell.com/vuep is not responding
Firstly, thanks for your effort on this, I love the idea of this component.
I found a problem with the way you pass the template prop to the vuep
component referencing the string of code to render or the querySelection
string to find the script tag of the code to render.
I keep getting an error that it can't be found because you are trying to querySelect
the template
element before it's even mounted. You need to change this to be done in mounted
not created
for vue to find that template
element.
vuep/src/components/playground.js
Lines 9 to 14 in a5486c6
vuep/src/components/playground.js
Lines 71 to 78 in a5486c6
Line 77 will never find the template on the dom
我看源码里解析template部分时会判断script标签是否在末尾并补全,我想问一下这么设计的原因,难道不考虑有些人的书写习惯会将style放在末尾
vuep can not compile such a template:
this.code = `
<template>
<!-- ERROR:Unknown custom element: <my-global-component> - did you register the component correctly?-->
<my-global-component />
</template>
`
<my-global-component/>
is a component of the UI framework
If you try pasting something like the following at https://codemirror.net/mode/vue/index.html, the syntax works fine:
<template>
<i-scene>
<i-node ref="node"
size="100 100"
align="0.5 0.5 0.5"
mount-point="0.5 0.5 0.5"
>
Hello 3D
</i-node>
</i-scene>
</template>
It looks like this:
However, with Vuep, I get broken highlighting in CodeMirror:
Any idea why the highlighting is doing that with the closing tags?
使用firefox的63.0.3 (64 位),范例test最后一个使用iframe的方式不能解析正确。
Loving the project!
Some examples make the editor freeze, because it is updating the preview on every key stroke it seems like.
It may be a good idea to debounce (or throttle) updates to 100ms.
Another nice feature could be to provide a "run" or "play" button so that updates happen when desired.
And one more feature could be a checkbox that enables autorun, where when turned has to click "run".
类似于scss,ts,stylus之类的这种解析
项目还在维护吗?
Your component is great! I wonder if there is a way to preserve component state while editing the code.
Thanks.
Hello,
I can successfully render components in my app that's embedding vuep, but is there a way to pass app date into vuep somehow? For example, when writing code in the embedded editor, I'd like to be able to refer to live data being generated by the surround app. It seems though, that vuep is essentially a sandbox where no data can come in or out. Is this right? Are there any alternatives to get the behaviour I'm looking for?
Thanks!
element ui组件解析失败 控制台报错没有注册
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
这样做还是错的吗?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.