建立无需build的vue单页面应用SPA框架 |
您所在的位置：网站首页 › 创建网页的代码是什么格式的 › 建立无需build的vue单页面应用SPA框架 |
建立无需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 { "imports": { "vue": "/js/vue-3.3.4/dist/vue.esm-browser.js", "easyui":"/js/v3-easyui-3.0.14/dist/v3-easyui.js" } } @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'; 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');页面划分为上中下三层，中间划分为左右两部分，左边是功能树，右边是功能区。 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{t('Demo:translate at frontend browser,translate needed(vue)')}} SPA:Single Page Application copyright© Acroprise Inc. 2001-2023 ` }这里要注意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:` {{t('Home')}} {{t('Data Dictionary Editor')}} {{t('Like Button')}} {t('&About')}} ` } export default Com_Left;效果如下：
|
【本文地址】
今日新闻 |
推荐新闻 |