【亲测免费】 Vue3-SFC-Loader 使用教程

2026-01-16 09:58:46作者：翟萌耘Ralph

项目介绍

Vue3-SFC-Loader 是一个用于 Vue 3 和 Vue 2 的单文件组件（SFC）动态加载器。它允许开发者在不使用 Node.js 环境和 webpack 构建步骤的情况下，直接在 HTML 和 JavaScript 中运行时加载 .vue 文件。这个项目非常适合需要在浏览器中动态加载和渲染 Vue 组件的场景。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 vue3-sfc-loader：

npm install vue3-sfc-loader

或者

yarn add vue3-sfc-loader

使用示例

以下是一个简单的示例，展示如何在 HTML 文件中使用 vue3-sfc-loader 加载一个 Vue 组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue3-SFC-Loader 示例</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/vue3-sfc-loader"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    const { loadModule } = window['vue3-sfc-loader'];
    const options = {
      moduleCache: {
        vue: Vue
      },
      getFile(url) {
        return fetch(url).then(response => response.text());
      },
      addStyle(style) {
        const styleElement = document.createElement('style');
        styleElement.textContent = style;
        document.head.appendChild(styleElement);
      }
    };

    const App = loadModule('path/to/your/component.vue', options);

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