一、在线编译运行Vue文件步骤:
1、全局引入编译器
<script src="http://www.daelui.com/pool/prod/packages/babel/6.26.0/dist/babel.min.js" defer="defer"></script>
2、解析Vue文件
import coder from '@daelui/dogjs/dist/libs/coder'
coder.vue.parseTemplate(vuecode) // vuecode为实际vue代码
3、编译注册为Vue组件,并插入style样式
// resolve方法已包含解析功能,$dog.Vue为内置的Vue(可使用当前环境的Vue自行定义),$pig为umd文件加载器(基于System.js)
import $pig from '@daelui/pigjs'
coder.vue.resolve(vuecode, $dog.Vue, $pig).then(cp => {
this.component = cp
})
演示示例:
二、在线编译运行JS步骤
1、全局引入编译器
<script src="http://www.daelui.com/pool/prod/packages/babel/6.26.0/dist/babel.min.js" defer="defer"></script>
2、解析为UMD格式的编码
import coder from '@daelui/dogjs/dist/libs/coder'
coder.transformModuleUMD(jscode) // jscode为实际ES6、ES5代码
3、解析为UMD格式并获取模块
// resolve方法已包含解析功能,$pig为umd文件加载器(基于System.js)
import $pig from '@daelui/pigjs'
coder.resolve(jscode, $pig).then(res => {
let mod = res.default
// mod.run() // 调用实际模块上的方法
})
演示示例:
低配置云服务器,首次加载速度较慢,请耐心等候
预览页面:http://www.daelui.com/#/tigerlair/saas/preview/lpewglffnc7e
演练页面:http://www.daelui.com/#/tigerlair/saas/practice/lpewglffnc7e
扫码关注微信