在没有 Webpack/Bundlers 的 PHP 中镜像 Vue 组件

Posted 2023-02-22

【中文标题】在没有 Webpack/Bundlers 的 PHP 中镜像 Vue 组件

【英文标题】：Mirroring Vue Components in PHP without Webpack/Bundlers

【发布时间】：2020-05-09 01:48:48

【问题描述】：

我正在尝试在我的公司使用 Vue。目前我们没有使用任何像 Webpack 这样的 javascript 构建工具。这意味着没有 Babel，（Babel-Standalone 也不是一个选项）。 No Babel 意味着没有 Template Literals (``)，这使得在纯 Javascript 文件中定义组件变得很痛苦（Internet Explorer 不支持 Template Literals，并且要在干净的多行代码中在 Javascript 中定义模板，您需要 Template Literals，我们需要 IE支持）。我的团队已经同意在不久的将来转向 Laravel 和 Vue，但我们正在通过服务器迁移和代码更新，然后才能正确使用 Vue。

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

是否有任何不可预见的问题？ 有没有办法将这些 .php/HTML 文件的内容作为源包含而不是在 DOM 中呈现？

示例

// MyComponent.php or MyComponent.html

<script type="text/x-template" id="my-component-template">
    // component template definition
</script>

<script>
    Vue.component('myComponent', 
        template: '#my-component-template',
        // component vue data/methods/etc
    );
</script>

<style>
    // component styling
</style>

-

// MyPhpClass.php

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

-

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

Can we make vue.js application without .vue extension component and webpack? 这里有很多非常好的信息，但建议集中在使用带有模板文字的 .JS 文件，这对我们来说是不可能的 Vue components without webpack/npm/yarn http-vue-loader 的建议似乎很有帮助，但我将无法使用 Vue 之外的任何外部库

【问题讨论】：

1.一些功能需要 Webpack .vue 格式加载器，可以想到范围样式。 2.这需要Vue s-s-r，即Node.js Web服务器，它评估JS代码并将其渲染为HTML输出，您可以使用外部预渲染服务。

如果你用的是Vue3，看看github.com/FranckFreiburger/vue3-sfc-loader它对外部库的支持更好

【参考方案1】：

我也遇到过这个问题，得出的结论是：Vue没有为我们提供packinghtml内多个组件的便捷方式。如果是这样，我们的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-blocks。它是 Vue/VueRouter 之上的一层，从可用的 html 中提取这些组件并注册它们。

【参考方案2】：

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

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

包含的类公开了一个render 函数，该函数接受一个文件路径数组，指向您希望解析的许多 *.vue 文件。它将处理它们并将它们转换为批处理的<script> 和<style> 标签。生成的脚本代码应符合 IE 9+。如果您想将代码通过管道传输到外部源文件以通过 HTML 加载，还有 getScripts 和 getStyles 函数可以直接检索代码。

您的方法之间的主要区别在于处理功能模板和范围样式，这两种方法都在此解决方案中得到支持。还有一些额外的开销，在我的情况下是可以接受的，但可以通过使用上述两种额外的方法并缓存结果来减轻。

一个基本的用例可能是这样的：

<?php
    $vueFiles = glob(__DIR__ . '/vue-components/*.vue');
    // Output scripts before browser gets to custom elements
    // because IE crashes if it's not registered first
    VueLoader::render($vueFiles, '#vue-app');
?>

<div id="vue-app">
    <my-custom-component></my-custom-component>
</div>