webapp/index.html at main · OpenBekenIOT/webapp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
  <script>

    const options = {

      moduleCache: {
        vue: Vue,
      },

      getFile(url) {
        return fetch(url).then(response => response.ok ? response.text() : Promise.reject(response));
      },

      addStyle(styleStr) {
        const style = document.createElement('style');
        style.textContent = styleStr;
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },

      log(type, ...args) {
        console.log(type, ...args);
      }
    }

    const { loadModule, version } = window["vue3-sfc-loader"];

    const app = Vue.createApp({
      components: {
        'my-component': Vue.defineAsyncComponent(() => loadModule('./vue/myComponent.vue', options)),
      },
      template: `Hello <my-component></my-component> <sub>from vue3-sfc-loader v${ version }</sub>`
    });

    app.mount('#app');
  </script>
</body>
</html>