Need the full (compiler-included) build of Vue
webpack config
{
alias: {
'vue$': 'vue/dist/vue.common'
}
}import Vue from 'vue'
import Vuep from 'vuep'
import 'vuep/dist/vuep.css'
Vue.use(Vuep /*, { codemirror options } */)
// or Vue.component('Vuep', Vuep)
new Vue({
el: '#app',
created: function () {
this.code = `
<template>
<div>Hello, {{ name }}!</div>
</template>
<script>
module.exports = {
data: function () {
return { name: 'Vue' }
}
}
</script>
`
}
})template
<div id="app">
<vuep :template="code"></vuep>
</div>index.html
<!-- Import theme -->
<link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
<!-- depend vue -->
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vuep"></script>template
<vuep template="#example"></vuep>
<script v-pre type="text/x-template" id="example">
<template>
<div>Hello, {{ name }}!</div>
</template>
<script>
module.exports = {
data: function () {
return { name: 'Vue' }
}
}
</script>
</script>The default is supported in docsify. such as https://qingwei-li.github.io/vuep/README.md
https://codemirror.net/index.html
Vue.use(Vuep /*, { codemirror config }*/)<vuep :options="{ theme: 'material' }"></vuep>{
"lineNumbers": true,
"mode": "text/x-vue",
"theme": "material",
"tabSize": 2
}<vuep :options="{ mode: 'javascript' }" template="#demo4"></vuep>
<script v-pre type="text/x-template" id="demo4">
module.exports = {
template: `<div>I'am {{ name }}</div>`,
data: function () {
return { name: 'cinwell' }
}
}
</script><template>
<vuep v-model="value"></vuep>
</template>
<script>
export default {
data: () => ({
value: `module.exports = {
template: '<div>I\\'am {{ name }}</div>',
data: function () {
return { name: 'cinwell' }
}
}`
})
}
</script>You can customize JavaScript scope by setting an object to the scope property.
This object can contain component from your app scope to include them into Vuep scope.
- features.js: Component to showcase into Vuep
export default {
props: {
features: Array
},
template: `<div class="features">
<h3>Features</h3>
<ul>
<li v-for="feature in features">{{ feature }}</li>
</ul>
</div>`
}- app.js: Application that needs to showcase Features component through Vuep
import Vue from 'vue'
import Features from 'features' // Import component
new Vue({
el: '#app',
data: function () {
return {
scope: { Features }, // Set the scope of vuep
value: `
<template>
<div>
<features :features="features"></features>
</div>
</template>
<script>
export default {
components: {
Features // This variable is available through scope and can be used to register component
},
data () {
return {
features: [
'Single File Component',
'Babel for ES6/JSX/UMD/CommonJS',
'Scoped style',
'Customizable JavaScript scope'
]
}
}
}<\/script>`
}
}
})- app template:
<div id="app">
<vuep :value="value" :scope="scope"></vuep>
</div>First you need load CodeMirror theme style, You can view the list of theme from here.
Such as in your HTML file
<link rel="stylesheet" href="path/to/codemirror/theme/neo.css">Or in your CSS file
@import "codemirror/theme/neo.css"Configure the options for the component
<vuep :options="{ theme: 'neo' }"></vuep>I know you will worry that some browsers do not support ES6, but we have babel-standalone.
babel-standalone is a standalone build of Babel for use in non-Node.js environments, including browsers.
How to use:
In your HTML file
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>Done. Now you are free to use ES6, Vuep will compile them to ES5 through the babel.
<script v-pre type="text/x-template" id="demo3">Sure.
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
<script src="https://unpkg.com/babel-plugin-transform-vue-jsx"></script>Sure. if you use ES6 syntax you can even use import.
vuep implement a nodejs like synchrounous require interface in browser, so you can directly require a js file.
/* remote.js */
export default {
name: 'remote',
render () {
return <div>from remote</div>
}
}If you use script(type="text/x-template)", The script tag must be at the end, for example
<script v-pre type="text/x-template">
<style></style>
<template></template>
<script></script>
</script>These will be parsed incorrectly
<script v-pre type="text/x-template">
<script></script>
<style></style>
<template></template>
</script><script v-pre type="text/x-template">
<style></style>
<script></script>
<template></template>
</script>