将 Vue Sfc 添加到现有项目

Question

我有一个遗留项目，想开始使用 Vue.js 使用 CDN 的单文件组件。我确实遇到了一些插件，例如 https://github.com/FranckFreiburger/vue3-sfc-loader。从CDN的角度有什么解决方案可以吗：

一般挂载到页面/正文的根目录？
从 /components 文件夹添加每个 *.vue 文件？

然后我们可以在现有页面的任何地方调用这些组件。我相信插件 https://github.com/FranckFreiburger/vue3-sfc-loader 只允许我们挂载到特定的 div#app 并添加自定义模板（至少遵循提供的示例）干杯！

Answer 1

在这次调查中花了很多时间之后，我选择了 Vue Web Components approach

将所有组件添加到 /components 文件夹中，我们只需要像下面这样 package.json

  "scripts": {
    "build": "node_modules/.bin/vue-cli-service build --target wc '/components/*.vue' --name my-app",
    "watch": "node_modules/.bin/vue-cli-service build --watch --target wc '/components/*.vue' --name my-app"
  },
  "dependencies": {
    "@vue/cli-service": "^4.5.12",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  }

并添加以下vue.config.js文件以便捆绑包中只有一个文件

// vue.config.js
module.exports = {
  configureWebpack: {
    // No need for splitting
    optimization: {
      splitChunks: false
    }
  }
}

然后通过添加

  <script src="https://unpkg.com/vue"></script>
  <script src="./dist/my-app.min.js"></script>

到页面，我们就可以使用组件了（查看dist/demo.html确认组件的最终名称）对我来说，这提供了所需的东西。希望有人能发现它有用。

将 Vue Sfc 添加到现有项目

Add Vue Sfc to existing project

vue.js

vue-component

vue3-sfc-loader