vuepを使えばVuejsのLive Editorが簡単に作れたので、自分やったことを投稿させていただきます。
間違いなどありましたら教えていただけるとありがたいです。
Vuep
- github
- 公式
こんな感じで動かせました
おぉ、すごい！
実際に私が試してみたサンプルはこちらです
Installation
yarn add vuep codemirror
私はwebpackで動かしたのでこのような感じでインストールしました
yarn add vue vuep codemirror
yarn add -D webpack webpack-cli webpack-dev-server vue vue-loader vue-template-compiler vue-style-loader css-loader babel-loader @babel/core @babel/preset-env
webpack.config.js
const VueLoaderPlugin = require("vue-loader/lib/plugin")
module.exports = {
mode: "development",
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
loader: "babel-loader",
},
{
test: /\.css$/,
use: [
"vue-style-loader",
"css-loader",
],
},
]
},
plugins: [
new VueLoaderPlugin()
],
resolve: {
extensions: [".vue", ".js"],
alias: {
"vue$": "vue/dist/vue.esm.js",
"@": `${__dirname}/src`
}
},
devServer: {
port: 9000,
contentBase: __dirname,
publicPath: "/dist/",
open: true
}
}
.babelrc
{ "presets": ["@babel/preset-env"] }
index.html
<!DOCTYPE html>
<meta charset=utf-8>
<title>sample</title>
<script src=dist/main.js defer></script>
<div id=app></div>
動かしてみる
公式を参考にこのような感じで index.jsとApp.vueを作成してみました
src/index.js
import Vue from "vue"
import Vuep from "vuep"
import "vuep/dist/vuep.css"
import App from "@/App"
Vue.use(Vuep);
new Vue({
render: h => h(App)
}).$mount("#app");
src/App.vue
<template>
<vuep :template="code" />
</template>
<script>
export default {
created() {
this.code = `
<template>
<div>Hello, {{ name }}!</div>
</template>
<script>
module.exports = {
data: function () {
return { name: 'Vue' }
}
}
<\/script>
`
}
}
</script>
yarn webpack-dev-server #http://localhost:9000 で開く
これで動かすことできました
または、index.htmlにテンプレートを用意し、
index.html
<!DOCTYPE html>
<meta charset=utf-8>
<title>sample</title>
<script src=dist/main.js defer></script>
<div id=app></div>
<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>
App.vueではこのようにしても同じように動作してくれました
src/App.vue
<template>
<vuep template="#example"></vuep>
</template>
コンポーネントを含める場合
ほぼ公式のままですが、こちらのFeature.vueをLive Editorで動作させるようにするには、scopeに含めるとうまくいくようです。
src/components/Features.vue
<template>
<div class="features">
<h3>Features</h3>
<ul>
<li v-for="(feature, i) in features" :key="i">
{{ feature }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
features: Array
},
}
</script>
src/App.vue
<template>
<vuep :value="value" :scope="scope" />
</template>
<script>
import Vue from 'vue'
import Features from "@/components/Features"
export default {
data() {
return {
scope: { Features },
value: `
<template>
<div>
<features :features="features"></features>
</div>
</template>
<script>
module.exports = {
components: {
Features
},
data () {
return {
features: [
'Single File Component',
'Babel for ES6/JSX/UMD/CommonJS',
'Scoped style',
'Customizable JavaScript scope'
]
}
}
}<\/script>`
}
}
}
</script>
テーマを変えてみる
こちらのテーマはどれでも使えるようです
src/App.vue
<template>
<vuep :template="code" :options="{ theme: 'neo' }" />
</template>
<script>
export default {
created() {
this.code = `
<template>
<div>Hello, {{ name }}!</div>
</template>
<script>
module.exports = {
data: function () {
return { name: 'Vue' }
}
}
<\/script>
`
}
}
</script>
<style>
@import "~codemirror/theme/neo.css";
</style>
<style>で使いたいテーマをimportし、:options="{ theme: 'neo' }"でテーマを変更することができました
最後まで読んでいただいてありがとうございました。m(_ _)m