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"'] //環境變數
	}
})