您现在的位置是：首页 >学无止境 >在浏览器中渲染vue SFC组件网站首页学无止境

在浏览器中渲染vue SFC组件

蔡徐鲲 2024-10-29 00:01:06
简介在浏览器中渲染vue SFC组件 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<script>
  window.process ??= {};
  process.env = {};
  process.env.NODE_ENV = "development";
</script>

<!--
  JSPM Generator Import Map
  Edit URL: https://generator.jspm.io/#U2VhYGBmD80rySzJSU1hSM1JzU3NK9EtyCktdjDSM9YzYygrTTXWLU5L1s3JT0xJLXIw0LPQMwGJOhgD5U0AL/MVwEEA
-->
<script type="importmap">
  {
    "imports": {
      "element-plus": "https://ga.jspm.io/npm:element-plus@2.3.6/es/index.mjs",
      "vue": "https://ga.jspm.io/npm:vue@3.3.4/dist/vue.esm-browser.js",
      "vue3-sfc-loader": "https://ga.jspm.io/npm:vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "@ctrl/tinycolor": "https://ga.jspm.io/npm:@ctrl/tinycolor@3.6.0/dist/module/public_api.js",
        "@element-plus/icons-vue": "https://ga.jspm.io/npm:@element-plus/icons-vue@2.1.0/dist/index.js",
        "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.3.0/dist/floating-ui.core.browser.mjs",
        "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.2.9/dist/floating-ui.dom.browser.mjs",
        "@popperjs/core": "https://ga.jspm.io/npm:@sxzz/popperjs-es@2.11.7/dist/index.mjs",
        "@vue/reactivity": "https://ga.jspm.io/npm:@vue/reactivity@3.3.4/dist/reactivity.esm-browser.js",
        "@vue/runtime-dom": "https://ga.jspm.io/npm:@vue/runtime-dom@3.3.4/dist/runtime-dom.esm-browser.js",
        "@vue/shared": "https://ga.jspm.io/npm:@vue/shared@3.3.4/dev.index.js",
        "@vueuse/core": "https://ga.jspm.io/npm:@vueuse/core@9.13.0/index.mjs",
        "@vueuse/shared": "https://ga.jspm.io/npm:@vueuse/shared@9.13.0/index.mjs",
        "async-validator": "https://ga.jspm.io/npm:async-validator@4.2.5/dist-web/index.js",
        "dayjs": "https://ga.jspm.io/npm:dayjs@1.11.8/dayjs.min.js",
        "dayjs/plugin/": "https://ga.jspm.io/npm:dayjs@1.11.8/plugin/",
        "escape-html": "https://ga.jspm.io/npm:escape-html@1.0.3/index.js",
        "lodash-es": "https://ga.jspm.io/npm:lodash-es@4.17.21/lodash.js",
        "lodash-unified": "https://ga.jspm.io/npm:lodash-unified@1.0.3/import.js",
        "memoize-one": "https://ga.jspm.io/npm:memoize-one@6.0.0/dist/memoize-one.esm.js",
        "normalize-wheel-es": "https://ga.jspm.io/npm:normalize-wheel-es@1.2.0/dist/index.mjs",
        "vue-demi": "https://ga.jspm.io/npm:vue-demi@0.14.5/lib/index.mjs"
      }
    }
  }


</script>

<div id="app"></div>
<!-- ES Module Shims: Import maps polyfill for olrder browsers without import maps support (eg Safari 16.3) -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.3/dist/es-module-shims.js"
        crossorigin="anonymous"></script>

<script type="module">
  import * as Vue from "vue";
  import ElementPlus from "element-plus";
  import Vue3SfcLoader from "vue3-sfc-loader";


  const template = `
  <script>
    import {ElButton, ElEmpty} from "element-plus";
    export default {
      components: {
        ElButton,
        ElEmpty
      }
    }
  </script>
  <template>
    <el-button>hello</el-button>
    <el-empty></el-empty>
</template>
  `;

  const options = {
    moduleCache: {
      vue: Vue,
      "element-plus": ElementPlus
    },
    async getFile(url) {
      return {
        getContentData: () => Promise.resolve(template)
      };
    },
    addStyle(textContent) {

      const style = Object.assign(document.createElement("style"), { textContent });
      const ref = document.head.getElementsByTagName("style")[0] || null;
      document.head.insertBefore(style, ref);
    }
  };

  const app = Vue.createApp({
    components: {
      "App": Vue.defineAsyncComponent(() => {
        return Vue3SfcLoader.loadModule("App.vue", options);
      })
    },
    template: "<App/>"
  });

  app.use(ElementPlus);
  app.mount("#app");
</script>
</body>
</html>
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐