byview 是一個(gè)自己開發(fā)的，用于引導(dǎo)vue組件直接工作在瀏覽器中而不需要腳手架的一個(gè)微框架(啟動(dòng)引擎),使得vue在瀏覽器中開發(fā)體驗(yàn)跟vue-cli相似。無需獨(dú)立編譯資源文件，修改立即生效。但由于在瀏覽器端，故無法使用npm包管理工具。
背景: 由于某些原因不能夠使用vue工程化完全重構(gòu)整個(gè)舊的系統(tǒng)項(xiàng)目，但又想在其基礎(chǔ)上使用vue來開發(fā)新功能。byview的目標(biāo)主要是面向內(nèi)部人員的老舊系統(tǒng), 可以將老舊系統(tǒng)中的一小部分通過byview中的vue功能來實(shí)現(xiàn)。
byview使用vue3作為前端框架，element-plus作為ui框架。
byview: 引導(dǎo)vue組件正確工作在舊系統(tǒng)中的一個(gè)微框架(啟動(dòng)引擎)。
引入byview
byview的核心文件為 core.js, 在html中直接引入core.js即可
<script src="byview/core.js"></script>
然后就可以通過 $byview 變量來使用 byview 的功能
配置
如要使用byview, 需要先對(duì)byview做一些前置配置, 以便byview能夠正確地獲取資源
- 設(shè)置 window.WEBROOT_URL 變量的值來設(shè)置當(dāng)前的網(wǎng)站項(xiàng)目url, 它默認(rèn)為 /
- 設(shè)置 window.BYVIEW_URL 來設(shè)置byview目錄的URL地址, 它默認(rèn)為 byview/ (相對(duì)于window.WEBROOT_URL)
- 設(shè)置 window.BYVIEW_RES_VERSION 來控制byview組件的超級(jí)緩存, 它是資源下載的版本號(hào)。當(dāng)開啟了byview的超級(jí)緩存后，每當(dāng)有資源（css，js，vue）變更時(shí)，需要更新該版本號(hào) 用來告訴byview資源更新了
編寫vue模板文件
vue文件和vue-cli中的vue文件基本沒有差別，由于用的是Vue3， 故推薦使用Composition Api 方式編寫組件
vue文件的格式為html格式。現(xiàn)在編寫一個(gè)名為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>
<!-- 限定當(dāng)前組件的樣式 -->
<style scoped>
.text {
color: green;
}
</style>
渲染結(jié)果
渲染
調(diào)用 $byview.run('index.vue', 'body') 將文件渲染到body中
- 第一個(gè)參數(shù)是vue文件的路徑, 其相對(duì)于網(wǎng)站根目錄, 也就是 window.WEBROOT_URL 的值
- 第二個(gè)參數(shù)是一個(gè)html元素選擇器 第三個(gè)參數(shù)將原樣傳遞給組件 props的params屬性
<script>
$byview.run('index.vue', 'body');
</script>
加載其他組件
我們新增一個(gè)組件文件為 comp.vue
內(nèi)容如下:
<template>
<span>{{text}}</span>
</template>
<!-- 腳本 -->
<script>
export default {
props: {
text: {
default: "test"
}
}
}
</script>
<!-- 限定當(dāng)前組件的樣式 -->
<style scoped>
span {
color: red;
}
</style>
然后在index.vue中加載這個(gè)組件:
<!-- 模板 -->
<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>
<!-- 限定當(dāng)前組件的樣式 -->
<style scoped>
.text {
color: green;
}
</style>渲染結(jié)果
還可以將組件名稱寫在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>
<!-- 限定當(dāng)前組件的樣式 -->
<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>
<!-- 限定當(dāng)前組件的樣式 -->
<style scoped>
.text {
color: green;
}
</style>
byview_load_name_components 的第一個(gè)參數(shù)可以是個(gè)數(shù)組, 同時(shí)加載多個(gè)組件
加載外部的js腳本
可以通過 $byview.loadScript 或者 byview_load_script 方法加載一個(gè)或多個(gè)外部的js庫文件或者配置數(shù)據(jù)
<script >
const [aResult, bResult] = await $byview.loadScript(['a.js', 'b.js']);
</script>
加載外部css文件
可以通過 byview_load_css 或者 $byview.loadCss 方法加載一個(gè)或多個(gè)外部的css到頁面中
在vue文件中可以通過link標(biāo)簽引入外部css文件:
<link rel="stylesheet" href="sample2/test.css" scoped />
link 標(biāo)簽的scoped屬性為可選, 表示樣式是否僅當(dāng)前組件生效 和 style 的 scoped 屬性作用一樣 href 屬性的路徑是相對(duì)于網(wǎng)站根目錄, 如果需要先對(duì)于當(dāng)前vue文件, 必須以 ./ 開頭
緩存
所有組件、js、css等加載，只要下載成功，就會(huì)緩存到內(nèi)存中，下次會(huì)從內(nèi)存中直接取出.
除了內(nèi)存緩存外, 組件下載還支持文件緩存，下載過的文件瀏覽器刷新之后不會(huì)再次下載， 會(huì)從緩存數(shù)據(jù)庫中讀取以提高響應(yīng)速度。
除了文件緩存之外， 組件緩存會(huì)將已經(jīng)解析好的組件結(jié)構(gòu)直接緩存，不會(huì)再次解析vue文件的內(nèi)容（瀏覽器刷新之后也不會(huì)再次解析vue文件中dom樹）。
緩存是可以通過設(shè)置不同的 window.BYVIEW_RES_VERSION 值來清除緩存, 一般手動(dòng)進(jìn)行設(shè)置該值, 可以集成到后臺(tái)系統(tǒng)的頁面中手動(dòng)更新所有緩存。
內(nèi)存緩存每次刷新瀏覽器之后就會(huì)丟失。 文件和組件緩存如果開啟， 在程序中可以通過 $
byview.superCache.clearAllResourceCache 方法清空資源(文件, js, css等)緩存。
緩存效果
調(diào)試
- 在瀏覽器中查看vue文件的js
瀏覽器以chrome為例子, 可以在source面板按快捷鍵 ctrl+p 然后直接輸入vue文件的名稱即可找到對(duì)應(yīng)的js文件, 可以在該文件中打斷點(diǎn)調(diào)試vue文件.
這里的.vue文件的內(nèi)容只有js內(nèi)容, 沒有template的內(nèi)容
- 在瀏覽器中查看vue文件的模板內(nèi)容
我們可以在控制臺(tái) 輸入 bv._loadedComponents 查看所有的已加載組件, 并找到其中的 template 屬性查看具體的模板內(nèi)容
bv 是 $byview 變量的簡稱
- 查看vue組件的實(shí)例
當(dāng)我們需要查看vue組件的實(shí)例對(duì)象已經(jīng)其當(dāng)前的數(shù)據(jù), 可以通過 bv.$conmponents 查看所有的組件示例
例如 bv.$
components.TestComp.last.text
bv.$components.TestComp.last 表示最后一個(gè) TestComp 組件(頁面中可能有多個(gè)TestComp實(shí)例)
- 在控制臺(tái)中調(diào)用內(nèi)置方法
我們可以通過 byview_get_gblprops 方法來獲取 vue 的 globalPropertiesConfig 屬性, 例如打開一個(gè)內(nèi)置的帶驗(yàn)證碼的確認(rèn)對(duì)話框:
console.log(
await byview_get_gblprops()
.$byConfirmHtmlCode('確定進(jìn)行危險(xiǎn)操作嗎?')
? '繼續(xù)' : '不繼續(xù)'
)
- 清空緩存
調(diào)用 $
byview.superCache.clearAllResourceCache 方法清空資源緩存
- byview 調(diào)試選項(xiàng)
在控制臺(tái)可以通過 byview_get_gblprops().$byOpenDebugConfigDialog() 方法打開調(diào)試面板
調(diào)試面板中可以控制各個(gè)緩存開關(guān)，在調(diào)試模式下， 建議關(guān)閉文件緩存和內(nèi)存緩存
結(jié)尾
更多用法請查看文檔
git地址:byview: 引導(dǎo)vue組件正確工作在舊系統(tǒng)中的一個(gè)微框架(啟動(dòng)引擎)。
離線文檔 docs.html 克隆代碼后可以在瀏覽器中直接打開查看
