0%

vue 插件: vue-runkit

vue-runkit 是一個 vue component,是 runkit 的 wrapper

runkit 是一個讓你在瀏覽器上執行一些 node.js 程式的網站

GitHub: https://github.com/maple3142/vue-runkit

安裝

安裝: npm install vue-runkit
cdn: https://unpkg.com/vue-runkit

程式碼

1
2
3
4
5
6
7
8
9
<!--建議手動引用"https://embed.runkit.com",不過就算沒有的話vue-runkit也會自動加入-->
<script src="https://embed.runkit.com"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-runkit/dist/vue-runkit.min.js"></script>
<div id="runkit">
<!--加button是為了只在需要時才載入embed-->
<button v-if="!show" @click="show=!show">show embed</button>
<runkit v-else :source="code" :env="env" node-version="8"/>
</div>
1
2
3
4
5
6
7
8
9
Vue.component('runkit', vuerunkit) //註冊 component
new Vue({
el: '#runkit',
data: {
show: false,
code: 'console.log(process.env.msg)', //code
env: ['msg="Hello World"'] //環境變數
}
})