File tree Expand file tree Collapse file tree 2 files changed +34
-54
lines changed Expand file tree Collapse file tree 2 files changed +34
-54
lines changed Original file line number Diff line number Diff line change 1
1
<!DOCTYPE html>
2
2
< html >
3
3
< body >
4
- < div id ="app "> </ div >
5
- < script src ="https://unpkg.com/vue@next "> </ script >
4
+ < script src ="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js "> </ script >
6
5
< script src ="vue3-sfc-loader.js "> </ script >
7
6
< script >
8
7
9
- const options = {
10
-
11
- moduleCache : {
12
- vue : Vue ,
13
- } ,
14
-
15
- getFile ( url ) {
16
-
17
- return fetch ( url ) . then ( response => response . ok ? response . text ( ) : Promise . reject ( response ) ) ;
18
- } ,
19
-
20
- addStyle ( styleStr ) {
21
- const style = document . createElement ( 'style' ) ;
22
- style . textContent = styleStr ;
23
- const ref = document . head . getElementsByTagName ( 'style' ) [ 0 ] || null ;
24
- document . head . insertBefore ( style , ref ) ;
25
- } ,
26
-
27
- log ( type , ...args ) {
28
- console . log ( type , ...args ) ;
8
+ /* <!-- */
9
+ const config = {
10
+ files : {
11
+ '/component.vue' : `
12
+ < script >
13
+ const { test } = require('./foo/test.js')
14
+ console.log( test() );
15
+ </ script >
16
+ `,
17
+
18
+ '/foo/test.js': `
19
+ exports.test = function() {
20
+
21
+ return require('../bar/test.js').test();
22
+ }
23
+ `,
24
+
25
+ '/bar/test.js': `
26
+ exports.test = function() {
27
+
28
+ return 'test_ok';
29
+ }
30
+ `
29
31
}
30
- }
32
+ };
33
+ /* --> */
31
34
32
- const { loadModule } = window [ "vue3-sfc-loader" ] ;
33
35
34
- const app = Vue . createApp ( {
35
- components : {
36
- 'my-component' : Vue . defineAsyncComponent ( ( ) => loadModule ( './myComponent.vue' , options ) ) ,
37
- } ,
38
- template : 'Hello <my-component></my-component>'
39
- } ) ;
36
+ const options = {
37
+ moduleCache: { vue: Vue },
38
+ getFile: url => config.files[url],
39
+ addStyle: () => {},
40
+ }
40
41
41
- app . mount ( '#app' ) ;
42
+ Vue.createApp(Vue.defineAsyncComponent(() = > window['vue3-sfc-loader'].loadModule('/component.vue', options))).mount(document.body );
42
43
43
44
</ script >
44
45
</ body >
45
- </ html >
46
+ </ html >
47
+
Load Diff This file was deleted.
You can’t perform that action at this time.
0 commit comments