vue.js - 将 Vue Sfc 添加到现有项目

Question

我有一个遗留项目，想通过 CDN 开始使用 Vue.js 单文件组件。我确实遇到了一些插件，例如 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 文件以便 bundle 中只有一个文件

// 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确认组件的最终名称)对我来说，这提供了所需的东西。希望有人能发现它有用。