Javascript 在PHP中镜像Vue组件而不使用Web包/捆绑包

我正试图在我的公司使用Vue。目前我们没有使用任何Javascript构建工具，比如Webpack。这意味着没有巴别塔（巴别塔也不是一个选项）。NoBabel意味着没有模板文字（```），这使得在纯Javascript文件中定义组件非常痛苦（Internet Explorer不支持模板文字，要在干净的多行代码中用Javascript定义模板，您需要模板文字，我们需要IE支持）。我的团队已经同意在不久的将来转向Laravel和Vue，但在我们能够正确使用Vue之前，我们正在进行服务器迁移和代码更新

所以我想我会尽量模仿.vue的布局。首先，我在PHP或HTML文件中创建组件，在X模板中定义模板以及Vue组件实例化和样式。在我的PHP控制器/class/etc中，我需要该文件，它在DOM中呈现。这个解决方案可行，但我有几个问题

• 有什么不可预见的问题吗
• 有没有办法将这些.php/HTML文件的内容作为源文件而不是在DOM中呈现

例子 -

我已经研究了很多关于在没有捆绑包的情况下使用Vue的问题。下面是一些有用的线索

• • 这里有很多非常好的信息，但是建议将重点放在使用带有模板文本的.JS文件上，这对我们来说是不可能的
• • http vue加载程序建议似乎很有用，但我将无法使用vue之外的任何外部库

---

您所采取的方法可以很好地工作，但当然缺乏在webpack中处理*.vue文件时提供的简单性和功能性。我最近在一个个人项目中遇到了一个类似的用例，为此，我用PHP解决了它，并附带了一些composer依赖项

我正在链接到GitHub上的存储库

包含的类公开了一个

render

函数，该函数接受要解析的任意多个*.vue文件的文件路径数组。它将处理它们并将它们转换为批处理的

和

标记。生成的脚本代码应符合IE 9+标准。如果要将代码导入外部源文件以通过HTML加载，还可以使用

getScripts

和

getStyles

函数直接检索代码

这种方法的主要区别在于处理函数模板和作用域样式，这两种样式在本解决方案中都受支持。还有一点额外的开销，这在我的情况下是可以接受的，但是可以通过使用上述两个额外的方法和缓存结果来减轻

一个基本用例可以是：

---

我也遇到了这个问题，并得出结论：Vue并没有为我们提供一种方便的方式来
打包html中的多个组件。如果是这样的话，我们的php问题就不存在了，我们可以连接一些vue文件继续我们的业务

如果你能写这样的东西呢：

<template component="my-component">
  <div>
    <!-- template html here -->
  </div>
  <style scoped>
    <!-- style here -->
  </style>
  <script>
    // vue component definition here.
    export default {
      data(){ 
        return {
          variable: 'my value'
        }
      }
    }
  </script>
</template>


//这里是vue组件定义。
导出默认值{
数据（）{
返回{
变量：“我的值”
}
}
}

现在，整个组件都包含在模板元素中。
这些模板元素可以在客户端上提取和重建

为了省去重新发明这个轮子的麻烦，你可以使用。它是Vue/VueRouter之上的一个层，从可用的html中提取这些组件并注册它们。
1。有些功能需要Webpack.vue格式加载器，所以会想到范围样式。2.这需要Vue SSR，即计算js代码并将其呈现为HTML输出的Node.js web服务器，您可以使用外部预呈现服务。如果您使用的是Vue3，请查看它对外部库的更好支持
// MyPhpClass.php

public function includeComponents() {
    include('path/to/MyComponent.php');
}

<template component="my-component">
  <div>
    <!-- template html here -->
  </div>
  <style scoped>
    <!-- style here -->
  </style>
  <script>
    // vue component definition here.
    export default {
      data(){ 
        return {
          variable: 'my value'
        }
      }
    }
  </script>
</template>