大家好，欢迎来到IT知识分享网。

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能够正确地获取资源

1. 设置 window.WEBROOT_URL 变量的值来设置当前的网站项目url, 它默认为 /
2. 设置 window.BYVIEW_URL 来设置byview目录的URL地址, 它默认为 byview/ (相对于window.WEBROOT_URL)
3. 设置 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 克隆代码后可以在浏览器中直接打开查看