VueRun

免编译打包，支持远程组件、 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


# 启动服务，启动成功后会自动打开浏览器访问 http://127.0.0.1:1212/#/
zzz w

🏃 可选配置


// 以下为默认配置
VueRun.config({
  debug: false, // 是否开启调试模式
  cdn: './static', // 依赖包路径，使用 VueRun.lib("资源路径") 时会自动补全
  version: 1, // 如果设置版本号，表示开启缓存功能，可使用 VueRun.clearCache() 清空缓存
  babel: true, // 开启 es6 转 es5 功能
  js: [], // 初始化前优先加载的 js 路径列表，如果需要用 VueRun.lib 补全路径需要分开设置
  css: [], // 初始化前优先加载的 css 路径列表
  notExist: function (url) {
    console.log('组件不存在', url);
  }
});

🏷 开发热更新

使用 zzz 工具，具体参考上面示例

📓

后台模板