vue3异步组件加载实现方式：一个基于Vue3的无编译小框架
vue3异步组件加载实现方式：一个基于Vue3的无编译小框架vue文件的格式为html格式。现在编写一个名为index.vue的文件 示例代码如下：vue文件和vue-cli中的vue文件基本没有差别，由于用的是Vue3， 故推荐使用Composition Api 方式编写组件byview的核心文件为 core.js 在html中直接引入core.js即可<script src="byview/core.js"></script>然后就可以通过 $byview 变量来使用 byview 的功能如要使用byview 需要先对byview做一些前置配置 以便byview能够正确地获取资源
byview 是一个自己开发的，用于引导vue组件直接工作在浏览器中而不需要脚手架的一个微框架(启动引擎) 使得vue在浏览器中开发体验跟vue-cli相似。无需独立编译资源文件，修改立即生效。但由于在浏览器端，故无法使用npm包管理工具。
背景: 由于某些原因不能够使用vue工程化完全重构整个旧的系统项目，但又想在其基础上使用vue来开发新功能。byview的目标主要是面向内部人员的老旧系统 可以将老旧系统中的一小部分通过byview中的vue功能来实现。
byview使用vue3作为前端框架，element-plus作为ui框架。
byview: 引导vue组件正确工作在旧系统中的一个微框架(启动引擎)。
引入byviewbyview的核心文件为 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-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 克隆代码后可以在浏览器中直接打开查看
