江苏龙网

  1. 主页 > 生活百科 > >

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

Vue3

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=https://www.isolves.com/it/cxkf/jiagou/2021-12-30/"byview/core.js">然后就可以通过 $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> 
一个基于Vue3的无编译小框架 byview

文章插图
渲染结果
 
渲染调用 $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>
一个基于Vue3的无编译小框架 byview

文章插图
渲染结果
 
还可以将组件名称写在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>


推荐阅读


上一篇：中小叶功夫红茶功效,功夫红茶历史

下一篇：斯里兰卡红茶甜,斯里兰卡红茶历史