一个基于Vue3的无编译小框架 byview

byview 是一个自己开发的，用于引导vue组件直接工作在浏览器中而不需要脚手架的一个微框架(启动引擎),使得vue在浏览器中开发体验跟vue-cli相似。无需独立编译资源文件，修改立即生效。但由于在浏览器端，故无法使用npm包管理工具。

背景: 由于某些原因不能够使用vue工程化完全重构整个旧的系统项目，但又想在其基础上使用vue来开发新功能。byview的目标主要是面向内部人员的老旧系统, 可以将老旧系统中的一小部分通过byview中的vue功能来实现。

byview使用vue3作为前端框架，element-plus作为ui框架。

byview: 引导vue组件正确工作在旧系统中的一个微框架(启动引擎)。


引入byview

byview的核心文件为 core.js, 在html中直接引入core.js即可

<script src=”byview/core.js”></script>然后就可以通过 $byview 变量来使用 byview 的功能


配置

如要使用byview, 需要先对byview做一些前置配置, 以便byview能够正确地获取资源

• 设置 window.WEBROOT_URL 变量的值来设置当前的网站项目url, 它默认为 /
• 设置 window.BYVIEW_URL 来设置byview目录的URL地址, 它默认为 byview/ (相对于window.WEBROOT_URL)
• 设置 window.BYVIEW_RES_VERSION 来控制byview组件的超级缓存, 它是资源下载的版本号。当开启了byview的超级缓存后，每当有资源（css，js，vue）变更时，需要更新该版本号 用来告诉byview资源更新了

编写vue模板文件

vue文件和vue-cli中的vue文件基本没有差别，由于用的是Vue3， 故推荐使用Composition Api 方式编写组件


vue文件的格式为html格式。现在编写一个名为
index.vue
的文件, 示例代码如下：

<!– 模板 –><template>    <div>        text:<span class=”text”>{{helloText}}</span>    </div></template><!– 脚本 –><script> const {ref} = Vue; export default {          setup() {         let helloText = ref(“你好”);         return {             helloText         }     } }</script><!– 限定当前组件的样式 –><style scoped>    .text {        color: green;    }</style>

渲染结果

渲染

调用
$byview.run(‘index.vue’, ‘body’) 将文件渲染到body中

• 第一个参数是vue文件的路径, 其相对于网站根目录, 也就是 window.WEBROOT_URL 的值
• 第二个参数是一个html元素选择器 第三个参数将原样传递给组件 props的params属性

<script>    $byview.run(‘index.vue’, ‘body’);</script>
加载其他组件

我们新增一个组件文件为
comp.vue


内容如下:

<template>    <span>{{text}}</span></template><!– 脚本 –><script> export default {     props: {          text: {                default: “test”          }      } }</script><!– 限定当前组件的样式 –><style scoped>    span {        color: red;    }</style>
然后在
index.vue
中加载这个组件:

<!– 模板 –><template>    <div>        text:<span class=”text”>{{helloText}}</span>        <br>        <test-comp></test-comp>        <br>        <test-comp text=”测试一下”></test-comp>    </div></template><!– 脚本 –><script>    let [comp] = await byview_load_components(‘./comp.vue’);    export default {        components: {            TestComp: comp        },                setup() {            let helloText = “你好”;                        return {                helloText            }        }    }</script><!– 限定当前组件的样式 –><style scoped>    .text {        color: green;    }</style>

渲染结果

还可以将组件名称写在name属性中, 然后在
index.vue
中通过
byview_load_name_components
或者
$byview.loadComponentGroupByName
加载组件:

comp.vue:

<template>    <span>{{text}}</span></template><!– 脚本 –><script> export default {    name:’TestComp’    props: {        text: {            default: “test”        }      } }</script><!– 限定当前组件的样式 –><style scoped>    span {        color: red;    }</style>

index.vue:

<!– 模板 –><template>    <div>        text:<span class=”text”>{{helloText}}</span>        <br>        <test-comp></test-comp>        <br>        <test-comp text=”测试一下”></test-comp>    </div></template><!– 脚本 –><script>    export default {         components: await byview_load_name_components(‘./comp.vue’),                setup() {            let helloText = “你好”;                        return {                helloText            }        }    }</script><!– 限定当前组件的样式 –><style scoped>    .text {        color: green;    }</style>byview_load_name_components 的第一个参数可以是个数组, 同时加载多个组件


加载外部的js脚本

可以通过
$byview.loadScript
或者
byview_load_script
方法加载一个或多个外部的js库文件或者配置数据

<script >const [aResult, bResult] = await $byview.loadScript([‘a.js’, ‘b.js’]);</script>
加载外部css文件

可以通过
byview_load_css
或者
$byview.loadCss
方法加载一个或多个外部的css到页面中

在vue文件中可以通过link标签引入外部css文件:

<link rel=”stylesheet” href=”sample2/test.css” scoped />link 标签的scoped属性为可选, 表示样式是否仅当前组件生效 和 style 的 scoped 属性作用一样 href 属性的路径是相对于网站根目录, 如果需要先对于当前vue文件, 必须以 ./ 开头


缓存

所有组件、js、css等加载，只要下载成功，就会缓存到内存中，下次会从内存中直接取出.


除了内存缓存外, 组件下载还支持文件缓存，下载过的文件浏览器刷新之后不会再次下载， 会从缓存数据库中读取以提高响应速度。


除了文件缓存之外， 组件缓存会将已经解析好的组件结构直接缓存，不会再次解析vue文件的内容（浏览器刷新之后也不会再次解析vue文件中dom树）。


缓存是可以通过设置不同的
window.BYVIEW_RES_VERSION 值来清除缓存, 一般手动进行设置该值, 可以集成到后台系统的页面中手动更新所有缓存。


内存缓存每次刷新浏览器之后就会丢失。 文件和组件缓存如果开启， 在程序中可以通过
$byview.superCache.clearAllResourceCache 方法清空资源(文件, js, css等)缓存。

缓存效果


调试

在浏览器中查看vue文件的js

浏览器以chrome为例子, 可以在source面板按快捷键
ctrl
+
p
然后直接输入vue文件的名称即可找到对应的js文件, 可以在该文件中打断点调试vue文件.

这里的.vue文件的内容只有js内容, 没有template的内容

• 在浏览器中查看vue文件的模板内容

我们可以在控制台 输入
bv._loadedComponents
查看所有的已加载组件, 并找到其中的
template
属性查看具体的模板内容

bv 是 $byview 变量的简称

查看vue组件的实例

当我们需要查看vue组件的实例对象已经其当前的数据, 可以通过
bv.$conmponents 查看所有的组件示例


例如
bv.$components.TestComp.last.text

bv.$components.TestComp.last 表示最后一个 TestComp 组件(页面中可能有多个TestComp实例)

在控制台中调用内置方法

我们可以通过
byview_get_gblprops
方法来获取 vue 的 globalPropertiesConfig 属性, 例如打开一个内置的带验证码的确认对话框:

console.log(   await byview_get_gblprops()                  .$byConfirmHtmlCode(‘确定进行危险操作吗?’)  ? ‘继续’ : ‘不继续’ )

清空缓存

调用
$byview.superCache.clearAllResourceCache
方法清空资源缓存

byview 调试选项

在控制台可以通过
byview_get_gblprops().$byOpenDebugConfigDialog() 方法打开调试面板


调试面板中可以控制各个缓存开关，在调试模式下， 建议关闭文件缓存和内存缓存

结尾

更多用法请查看文档

git地址:byview: 引导vue组件正确工作在旧系统中的一个微框架(启动引擎)。

离线文档 docs.html 克隆代码后可以在浏览器中直接打开查看