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 克隆代碼后可以在瀏覽器中直接打開查看
