建立无需build的vue单页面应用SPA框架

vue、react这种前端渲染的框架，比较适合做SPA（Single Page Application）。如果用ejs做SPA，js代码控制好全局变量冲突不算严重，但dom元素用jquery操作会遇到很多的名称上的冲突（tag、id、name）。

SPA要解决的问题：

（1）业务组件用什么文件格式？如果使用*.vue文件，需要在部署前build转换。使用*.js文件，部署前不需要buid转换。本来js的初心就是“即改即用”，我不太喜欢ts,jsx这些需要build的东西。

（2）业务组件如何加载？业务组件不可能写的时候全部知道（根据用户权限决定），也不可能一次性全部加载（影响首屏效率），应该是需要的时候，才从服务器加载。vue为此提供了异步组件，可以用Vue.defineAsyncComponent来创建。

demo.html

<html><header></header><head><!-- <script src="/js/jquery-1.11.1/jquery-1.11.1.min.js"></script> --><!-- <script src="/js/vue-3.3.4/dist/vue.global.js"></script> --><script type="importmap">{"imports": {"vue": "/js/vue-3.3.4/dist/vue.esm-browser.js","easyui":"/js/v3-easyui-3.0.14/dist/v3-easyui.js"}}</script><style>@import '/js/v3-easyui-3.0.14/dist/themes/default/easyui.css';@import '/js/v3-easyui-3.0.14/dist/themes/icon.css';@import '/js/v3-easyui-3.0.14/dist/themes/color.css';@import '/js/v3-easyui-3.0.14/dist/themes/vue.css';</style></head><body><div id="app"></div><script type="module">import * as Vue from 'vue';//console.log(Vue);import EasyUI from 'easyui';//console.log(EasyUI);import main from './com.main.js';let app=Vue.createApp(main);app.use(EasyUI);app.config.globalProperties.t=function(DDKey){return DDKey};//console.log(app);app.mount('#app');</script></body>
</html>

页面划分为上中下三层，中间划分为左右两部分，左边是功能树，右边是功能区。

com.main.js

import * as Vue from 'vue';
import EasyUI from 'easyui';
//console.log(EasyUI);
import Com_Header from './com.header.js';
import Com_Left from './com.left.js';export default {components: {Com_Header,Com_Left},data() {return { tabFile:null,tabs:[]}},created(){this.$messager.ok=this.t('OK');this.$messager.cancel=this.t('Cancel');},methods:{switchTab(name,file){console.log(name,file);console.log(this.$refs.tabs);let tab=null;for(let i=0;i<this.tabs.length;i++){if (this.tabs[i].name==name){tab=this.tabs[i];this.$refs.tabs.select(i);break;}}if (!tab){let component=Vue.defineAsyncComponent(function(){let com=import(file);let comMark=Vue.markRaw(com);return comMark;});component=Vue.shallowRef(component);this.tabs.push({name,component});this.$nextTick(function(){this.$refs.tabs.select(this.tabs.length-1);});}},onCloseTab(tab){console.log(tab);console.log(tab.title);for(let i=0;i<this.tabs.length;i++){if (this.tabs[i].name==tab.title){this.tabs.splice(i,1);break;}}}},template: `<a href="/">{{t('Home')}}</a><h1>{{t('Demo:translate at frontend browser,translate needed(vue)')}}</h1><span>SPA:Single Page Application</span><div className='layout-header2' style="background-color:bisque"><Com_Header></Com_Header></div><div className='layout-middle'><div v-Resizable="{minWidth:200,handles:'e'}" className='layout-left' style="width:200px;float:left;overflow:hidden;background-color:aquamarine"><Com_Left :switchTab=switchTab></Com_Left></div><div className='layout-right' style="margin-left:200px;overflow:hidden"><Tabs ref=tabs :scrollable="true" :plain=true @tabClose=onCloseTab><TabPanel v-for="tab in tabs" :key="tab.name" :title="tab.name" :closable=true><component :is="tab.component"></component></TabPanel></Tabs></div><div style="clear:both"></div></div><div className='layout-footer' style="background-color:brown;text-align:center"><span>copyright© Acroprise Inc. 2001-2023</span></div>`
}

这里要注意Vue.markRaw和Vue.shallowRef两个函数，如果不写，会有警告：

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.

com.left.js

let Com_Left={props:['switchTab'],data(){return{   }},methods:{menu_click(e){//console.log(e);let name=e.target.innerHTML;//console.log(name);let file=e.target.getAttribute('file');//console.log(file);this.switchTab(name,file);e.preventDefault();}},template:`<div><a href='/'>{{t('Home')}}</a><br/><a href='DDEditor' @click=menu_click file='/vue/app/DDEditor/page.DDEditor.js'>{{t('Data Dictionary Editor')}}</a><br/><a href='likeButton' @click=menu_click file='/vue/app/likeButton/page.likeButton.js'>{{t('Like Button')}}</a><br/><a href='About' onClick={{this.menu_click}} file=''>{{t('&About')}}</a></div>`
}
export default Com_Left;

效果如下：