javascript - 在没有 Webpack/Bundlers 的情况下在 PHP 中镜像 Vue 组件

Question

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

所以我想我会尽量模仿 .vue 布局。首先，我在 PHP 或 HTML 文件中创建组件，在 X-Template 中定义模板以及 Vue 组件实例化和样式。在我的 PHP Controller /类/等中。我需要该文件，它呈现在 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');
}

-

我对不使用 bundler 使用 Vue 进行了大量研究。以下是一些有用的话题。

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

Answer 1

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

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

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

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

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

<?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>