Vue Web Loader 2 Demo Vue2

├── view ├── test.js ├── vue3.js ├── vue2.js ├── btn.vue ├── index.vue └── app.vue ├── demo ├── views │ ├── p404.vue │ ├── table.vue │ ├── demo.vue │ ├── layout.vue │ └── main.js └── index.html ├── vue2.html ├── vue3.html ├── README.md └── js ├── vue-web-loader-2.deepseek.js ├── vue-web-loader-2.js ├── vue-router.3.6.5.min.js └── vue.2.7.16.min.js /view/test.js: -------------------------------------------------------------------------------- 1 | var test = { 2 | x: 1, 3 | y: 2, 4 | z: 3, 5 | } 6 | export default test; -------------------------------------------------------------------------------- /demo/views/p404.vue: -------------------------------------------------------------------------------- 1 | 9 | 21 | -------------------------------------------------------------------------------- /view/vue3.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import test from './test.js' 3 | import app from './app.vue' 4 | 5 | 6 | window.vueapp = Vue.createApp(app); 7 | window.vueapp.mount('#app'); 8 | 9 | // 全局拦截Vue错误 10 | window.vueapp.config.errorHandler = function(err, vm, info) { 11 | // 计算是哪个vue文件出错 12 | console.error('Vue file >>>', vm.$vnode.tag.substr(vm.$vnode.tag.lastIndexOf('-')+1).replace('_','/')+'.vue'); 13 | console.error('Vue info >>>', info); 14 | console.error('Vue err >>>', err); 15 | console.error('Vue vm >>>', vm); 16 | } 17 | -------------------------------------------------------------------------------- /view/vue2.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import test from './test.js' 3 | import app from './app.vue' 4 | 5 | window.vueapp = new Vue({ 6 | el: '#app', 7 | data: {}, 8 | render: function(h) { 9 | return h(app); 10 | } 11 | }); 12 | 13 | // 全局拦截Vue错误 14 | Vue.config.errorHandler = function(err, vm, info) { 15 | // 计算是哪个vue文件出错 16 | console.error('Vue file >>>', vm.$vnode.tag.substr(vm.$vnode.tag.lastIndexOf('-')+1).replace('_','/')+'.vue'); 17 | console.error('Vue info >>>', info); 18 | console.error('Vue err >>>', err); 19 | console.error('Vue vm >>>', vm); 20 | } 21 | -------------------------------------------------------------------------------- /vue2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Web Loader 2 Demo Vue2 7 | 8 | 9 | 10 | 11 | 12 |

13 | 20 | 21 | -------------------------------------------------------------------------------- /vue3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Web Loader 2 Demo Vue3 7 | 8 | 9 | 10 | 11 | 12 |

13 | 20 | 21 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Web Loader 2 Full Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 |

18 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /demo/views/table.vue: -------------------------------------------------------------------------------- 1 | 6 | 37 | -------------------------------------------------------------------------------- /view/btn.vue: -------------------------------------------------------------------------------- 1 | 6 | 28 | -------------------------------------------------------------------------------- /demo/views/demo.vue: -------------------------------------------------------------------------------- 1 | 5 | 38 | -------------------------------------------------------------------------------- /view/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 28 | -------------------------------------------------------------------------------- /demo/views/layout.vue: -------------------------------------------------------------------------------- 1 | 12 | 34 | -------------------------------------------------------------------------------- /view/app.vue: -------------------------------------------------------------------------------- 1 | 10 | 45 | -------------------------------------------------------------------------------- /demo/views/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import layout from './layout.vue' 4 | import p404 from './p404.vue' 5 | import table from './table.vue' 6 | 7 | /* 简单state */ 8 | var state = { 9 | testData: null, 10 | } 11 | 12 | /* 简单funs */ 13 | var funs = { 14 | setTestData: function(data){ 15 | state.testData = data; 16 | } 17 | } 18 | 19 | var router = new VueRouter({ 20 | // mode: 'history', 21 | routes: [{ 22 | path: '/', 23 | name: 'layout', 24 | component: layout, 25 | children: [ 26 | // 在下面加子菜单 27 | { path: '/table', component: table, meta: {}, } 28 | ], 29 | }, 30 | { 31 | path: '/404', 32 | component: p404, 33 | hidden: true 34 | }, 35 | { path: '*', redirect: '/404', hidden: true }, 36 | 37 | ] 38 | }); 39 | 40 | // 创建vue实例 41 | window.VueApp = new Vue({ 42 | el: '#app', 43 | data: { 44 | state: state, 45 | }, 46 | router: router, 47 | }); 48 | 49 | // 将配置和常用函数挂载到Vue上 50 | Vue.prototype.$funs = funs; 51 | 52 | // 全局拦截Vue错误 53 | Vue.config.errorHandler = function(err, vm, info) { 54 | // 计算是哪个vue文件出错 55 | console.error('Vue file >>>', vm.$vnode.tag.substr(vm.$vnode.tag.lastIndexOf('-') + 1).replace('_', '/') + '.vue'); 56 | console.error('Vue info >>>', info); 57 | console.error('Vue err >>>', err); 58 | console.error('Vue vm >>>', vm); 59 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Web Loader 2 2 | 3 | ## 项目说明 4 | 5 | Vue Web Loader 2 可以在不使用前端工具(如npm,webpack等)的情况下，快速构建基于 Vue 的单页面应用，具有以下优点：依赖小、支持vue单页面组件、支持动态加载组件。 6 | 7 | ## 使用方式 8 | 9 | 1、在html页面上引入Vue和vue-web-loader-2.js，并加上Vue程序的挂载点 10 | ``` 11 | 12 | 13 | 14 | 15 |

16 | ``` 17 | 18 | 2、使用下面代码加载入口文件 19 | ``` 20 | 26 | ``` 27 | 28 | 3、入口文件要按Vue的要求去启动 29 | ``` 30 | // vue2.js 31 | import Vue from 'vue' 32 | import app from './app.vue' 33 | 34 | window.vueapp = new Vue({ 35 | el: '#app', 36 | data: {}, 37 | render: function(h) { 38 | return h(app); 39 | } 40 | }); 41 | ``` 42 | 43 | 44 | ``` 45 | // vue3.js 46 | import Vue from 'vue' 47 | import app from './app.vue' 48 | 49 | window.vueapp = Vue.createApp(app); 50 | window.vueapp.mount('#app'); 51 | ``` 52 | 53 | 4、快速使用： 54 | ``` 55 | demo目录提供了一个简单但相对完整的项目架构，可以直接复制根据需求扩展开发。 56 | ``` 57 | 58 | 5、特别注意： 59 | 60 | - import语句会先判断是否全局变量，如果是全局变量会直接使用，不会去加载后面对应文件 61 | - import语句如果临时想要取消，必须用多行注释/**/进行注释，单行注释依然会被解析出来 62 | 63 | 64 | 6、代码解读： 65 | 66 | ``` 67 | 68 | 这个代码文件的主要作用是实现一个动态加载和管理Vue组件的工具，名为`VueWebLoader`。 69 | 它通过异步加载远程的JavaScript和Vue单文件组件（SFC），并将其注册到Vue应用中。 70 | 以下是代码文件的主要功能和作用： 71 | 72 | ### 主要功能： 73 | 74 | 1. **Polyfill 支持**： 75 | - 为不支持`replaceAll`和`endsWith`方法的旧浏览器提供Polyfill支持。 76 | 77 | 2. **Vue版本检测**： 78 | - 检测当前使用的Vue版本（2.x或3.x），并根据版本创建相应的Vue应用实例。 79 | 80 | 3. **全局变量管理**： 81 | - 管理全局变量，如请求版本号、基础URL、组件关系表、组件回调表、加载中的组件表等。 82 | 83 | 4. **动态加载远程文件**： 84 | - 通过`requestGet`函数异步加载远程文件（如JavaScript和Vue组件），并处理请求版本号和错误处理。 85 | 86 | 5. **删除注释**： 87 | - 在加载的JavaScript文件中删除多行和单行注释，以确保代码的干净和可执行性。 88 | 89 | 6. **解析绝对URL**： 90 | - 解析相对URL为绝对URL，确保在不同环境下正确加载资源。 91 | 92 | 7. **解析Import语句**： 93 | - 解析JavaScript文件中的`import`语句，提取依赖的文件，并将其转换为可执行的代码。 94 | 95 | 8. **检查父组件的加载进度**： 96 | - 检查父组件的所有子组件是否已加载完成，并在所有子组件加载完成后执行回调函数。 97 | 98 | 9. **解析Vue SFC内容**： 99 | - 解析Vue单文件组件（SFC）的内容，提取`

404

table页

layout