vue@3.2.x.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CDN Vue develop config</title>
    <!-- Vue@3.2.47 {@link https://cn.vuejs.org/} -->
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
    <!-- Vue 文件转换库 {@link https://github.com/FranckFreiburger/vue3-sfc-loader} -->
    <script src="https://unpkg.com/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.js"></script>
    <!-- User defined 请确保加载于 UnoCSS 之前-->
    <script src="./uno.config.js"></script>
    <!-- UnoCSS Attributify {@link 文档 https://uno.antfu.me} {@link https://github.com/unocss/unocss/tree/main/packages/runtime} -->
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime@0.51.13/attributify.global.min.js"></script>
    <!-- Vue Demi {@link https://github.com/vueuse/vue-demi} -->
    <script src="https://cdn.jsdelivr.net/npm/vue-demi@0.13.11"></script>
    <!-- VueUse {@link https://vueuse.org/} -->
    <script src="https://unpkg.com/@vueuse/shared@10.1.2/index.iife.min.js"></script>
    <script src="https://unpkg.com/@vueuse/core@10.1.2/index.iife.min.js"></script>
    <!-- Pinia {@link https://pinia.vuejs.org/zh/} {@link 参考 https://github.com/vuejs/pinia/discussions/1051}  -->
    <script src="https://cdn.jsdelivr.net/npm/pinia@2.0.36/dist/pinia.iife.min.js"></script>
    <!-- IconifyIcon {@link https://github.com/iconify/iconify} -->
    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.7/dist/iconify-icon.min.js"></script>

    <!-- User Style -->
    <link rel="stylesheet" href="./src/style/main.css" />
    <!-- User Composables -->
    <script src="./src/composables/dark.js"></script>
    <script src="./src/composables/utils.js"></script>
    <!-- Pinia useStore 自定义函数 -->
    <script src="./src/store/useCounter.js"></script>

    <style>
      [v-cloak],
      [un-cloak] {
        display: none !important;
      }
    </style>
  </head>

  <body m0>
    <div
      id="app"
      v-cloak
      font-sans
      p="x-4 y-10"
      text="center gray-700 dark:gray-200"
    >
      <my-page un-cloak></my-page>
    </div>
  </body>

  <script>
    const { createApp } = Vue
    const { loadModule } = window['vue3-sfc-loader']
    const { createPinia } = Pinia

    createApp({
      components: {
        // 引入页面
        'my-page': getVueFile('./src/pages/hi.vue')
      }
    })
      .use(createPinia())
      .mount('#app')
  </script>
</html>