🌿

VueRun

免编译打包,支持远程组件、 ES 6 + Vue 组件化 开发

🔜 快速上手

🌰 请参考下面的例子
分别建立三个文件:一个 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/vue-run-static@0.0.8/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/vue-run-static@0.0.8" // 如有需要可以自行把需要的依赖库下载至本地 }); 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/vue@3.0.11/dist/vue.global.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@4.0.6/dist/vue-router.global.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-run-static@0.0.8/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/vue-run-static@0.0.8" // 如有需要可以自行把需要的依赖库下载至本地 }); 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
 
notion image

🏃 可选配置

// 以下为默认配置 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 工具 ,具体参考上面示例

 
📓
后台模板