免编译打包，支持远程组件、 ES 6 + Vue 组件化 开发
在线示例: https://sohaha.73zls.com/vue-run/demo/#/
🌰 请参考下面的例子
分别建立三个文件：一个 HTML 和 两个 Vue 组件
es6.vue
<template>
<div class="main">
{{ text }}
<hr>
<router-link to="/"> 点击返回</router-link>
</div>
</template>
<style scoped>
/* 支持 scoped */
.main {
color: #ffbe85;
}
</style>
<script lang="babel">
/* vue 3 写法 */
const {ref} = vue;
export default {
components: {},
setup(prop, ctx) {
const text = ref("我是 ES6 Demo，1s 后改变");
setTimeout(() => {
text.value = "时间到，变变变"
}, 1000)
return {text}
}
}
</script>
demo.vue
<template>
<div class="main">
{{ text }}
<hr>
<router-link to="/">点击返回</router-link>
</div>
</template>
<style>
.main {
text-align: center;
color: #41adff;
}
</style>
<script lang="javascript">
/* vue 2 写法 */
const text = "我是 Demo";
module.exports = {
data() {
return {
text
}
}
}
</script>
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Loading...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/[email protected]/run.js"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app" v-cloak>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
VueRun.config({
cdn: "<https://cdn.jsdelivr.net/npm/[email protected]>" // 如有需要可以自行把需要的依赖库下载至本地
});
VueRun.init(function () {
var defPage = { template: '<div>默认页面 <hr> <router-link to="/demo"> 点击跳转到 Dome</router-link><hr> <router-link to="/es6"> 点击跳转到 Es6 Demo</router-link><hr> <router-link to="/remote"> 点击跳转到 远程页面</router-link></div>' }
var routes = [
// 支持加载远程组件：VueRun("<http://xxx.com/xxx.vue>")
{ path: '/remote', component: VueRun("<https://cdn.jsdelivr.net/gh/sohaha/sohaha.github.io@master/vue-run/demo/remote.vue>") },
{ path: '/demo', component: VueRun("./demo.vue") },
{ path: '/es6', component: VueRun("./es6.vue") },
{ path: '*', component: defPage }
]
new Vue({
el: '#app',
router: new VueRouter({
routes: routes
}),
mounted: function () {
document.title = "加载完成"
}
})
}, {
js: [
VueRun.lib("/lib/vue-router.js"),
VueRun.lib('/lib/composition.js')
]
})
</script>
</body>
</html>
如果想要使用 Vue3 参考：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Loading...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.global.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/run.js>"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app" v-cloak>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
<script>
var vue = Vue;
VueRun.config({
cdn: "<https://cdn.jsdelivr.net/npm/[email protected]>" // 如有需要可以自行把需要的依赖库下载至本地
});
VueRun.init(function () {
var defPage = { template: '<div>默认页面 <hr> <router-link to="/demo"> 点击跳转到 Dome</router-link><hr> <router-link to="/es6"> 点击跳转到 Es6 Demo</router-link><hr> <router-link to="/remote"> 点击跳转到 远程页面</router-link></div>' }
var routes = [
// 支持加载远程组件：VueRun("<http://xxx.com/xxx.vue>")
{ path: '/remote', component: VueRun("<https://cdn.jsdelivr.net/gh/sohaha/sohaha.github.io@master/vue-run/demo/remote.vue>") },
{ path: '/demo', component: VueRun("./demo.vue") },
{ path: '/es6', component: VueRun("./es6.vue") },
{ path: '/:pathMatch(.*)*', component: defPage }
]
var App = {
data() {
return {};
},
};
var router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: routes,
})
var app = Vue.createApp(App);
app.use(router)
app.mount("#app");
document.title = "加载完成";
})
</script>
</body>
</html>
开发中为了方便热更新所以我们选择使用 zzz工具 作为 dev 服务。
首先安装好 zzz 工具，然后打开命令行初始化一个服务配置文件 zzz-watch.yaml ，
zzz w init
接下来我们复制下面的配置覆盖掉 zzz-watch.yaml 的内容：
# zzz watch 配置 <https://github.com/sohaha/zzz>
core:
# 配置版本号，勿手动修改
version: 1.0.19
# 监控配置
monitor:
# 使用轮询，开启可以监听挂载目录
poll: false
# 要监听的目录，支持通配符*，如“.,*”表示监听当前目录及其所有子目录
includeDirs:
- .,*
# 忽略监听的目录
exceptDirs:
- .idea/
- .git/
- .vscode/
- node_modules/
# 监听文件的格式，支持通配符*，如“.*”表示监听全部格式文件
types:
- .vue
- .js
- .css
- .html
# 命令
command:
startupExec:
# 本地静态服务器
http:
# 类型: vue-spa, web, 留空表示不启动
type: vue-run
# 指定端口，0 表示随机可用端口
port: 1212
# web 服务器目录
root: ./
# 将非本地文件的请求代理到服务器，主要用于本地跨域问题，留空表示不使用，格式如下：
# proxy: <https://blog.73zls.com>
proxy:
# 自动打开浏览器
openBrowser: true
# 其他
other:
# 延迟执行指令通知时间（毫秒），不限制为 0
delayMillSecond: 100