我正在尝试在我的公司使用 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 之外使用任何外部库
最佳答案
您采用的方法可以正常工作,但当然缺少在 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>
关于javascript - 在没有 Webpack/Bundlers 的情况下在 PHP 中镜像 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59867553/