vue3-sfc-loader #846

mark9804 · 2022-07-07T08:41:54Z

mark9804
Jul 7, 2022
Collaborator

这玩意可以直接在浏览器里编译 .vue 组件（支持组件嵌套），刚刚试了一下能用，主要的限制是因为需要 fetch 文件，所以主入口好像只能声明异步组件 Vue.defineAsyncComponent

https://github.com/FranckFreiburger/vue3-sfc-loader

index.html

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>genshin-overview-vue3</title>
    <script src="../../data/js/vue3.global.js"></script>
    <script src="../../data/js/vue3-sfc-loader.js"></script>
    <link rel="stylesheet" href="component/overview/overview.css" />
    <link rel="icon" href="data:," />
  </head>
  <body>
    <div id="app">
    </div>
    <script type="module">
      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: {
          "overview-app": Vue.defineAsyncComponent(() => loadModule("component/overview/app.vue", options)),
        },
        template: `<overview-app></overview-app>`,
      })

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

app.vue

<template>
  <div class="container-overview">{{testTitle}}</div>
  <character-info-box></character-info-box>
</template>

<script setup>
import CharacterInfoBox from "./component.vue";
const testTitle = "overview-app";
</script>

<style>

</style>

component.vue

<template>
<div>{{testTitle}}</div>
</template>

<script setup>
const testTitle = "character-info";
</script>

<style scoped>

</style>

Arondight · 2022-07-07T11:09:38Z

Arondight
Jul 7, 2022
Maintainer

这个有点强的

1 reply

Arondight Jul 7, 2022
Maintainer

哎，可惜我前一阵换了个工作，以后估计就和前端无缘了，代码也不会很常写了，估计一个月几百行了不得了

mark9804 · 2022-07-08T02:38:40Z

mark9804
Jul 8, 2022
Collaborator Author

（相对 js）太慢了，自己加载自己要 0.7s

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vue3-sfc-loader #846

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

vue3-sfc-loader #846

mark9804 Jul 7, 2022 Collaborator

Replies: 2 comments · 1 reply

Arondight Jul 7, 2022 Maintainer

Arondight Jul 7, 2022 Maintainer

mark9804 Jul 8, 2022 Collaborator Author

mark9804
Jul 7, 2022
Collaborator

Replies: 2 comments 1 reply

Arondight
Jul 7, 2022
Maintainer

Arondight Jul 7, 2022
Maintainer

mark9804
Jul 8, 2022
Collaborator Author