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

Question

我正在尝试在我的公司使用 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.phppublic function includeComponents() {    include('path/to/MyComponent.php');}

Answer 1

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

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

包含的类公开了一个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>

Answer 2

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