README

这是一个小巧的工具，可以帮助将Vue（v.2）与所有响应式优势集成到几乎所有的PHP项目中，无需使用webpack/rollup或gulp/require.js等重量级加载器。

也作为WordPress插件提供：只需将其放入/wp-content/plugins文件夹。

Vue组件与vuer实用工具组合，并通过简单的html容器 + new Vue vueLauncher技术注入。

此外，它还使用lessphp处理用less编写的样式。

注意，Vue 3、ES6/module exports、模板语言、通过src加载等不支持——加载器不会在服务器端处理或评估js，只会将*.vue组合成有效的ES5脚本和启动实例。

模板编译依赖于Vue内置模板编译器，因此您必须使用vue.js库的完整版本，而不是仅运行时版本。

用法

克隆此存储库——或通过composer加载

composer require vikseriq/vuelab

包含vuelab.php——或使用composer自动加载。
提供包含Vue单文件组件的目录路径。或者将其放入/vuelab/components。
注册组件——只需输入组件名称。
在某个位置放置具有class js-v-scope的html元素——它将指示vuelab在此容器中启动Vue实例。
然后调用vuelab_inject()。现在您的PHP页面已成为一个一流的Vue应用程序。

假设我们有一个app.vue，它加载todo-list.vue，其中包含todo.vue。将vuelab放入创建index.php，如下所示

include '/vuelab/vuelab.php';

vuelab_setup(__DIR__, ['app', 'todo-list', 'todo']);

vuelab_append('<div class="js-v-scope"><app /></div>');

vuelab_inject();

就这样。

WordPress上的用法

将插件添加到Wordpress：通过上传或复制到插件目录。
从插件页面启用插件——它将自动挂钩。
只需使用它：在所需页面区域注册组件及其占位符。

例如，将foo.vue放入您的模板文件夹中，并在functions.php中添加以下内容

// register component located in current path named foo.vue
vikseriq\vuelab\vuelab_setup(__DIR__, ['foo']);
// register placement for `foo` component - it will placed where `vuelab_inject` executed, in this case - at footer
vikseriq\vuelab\vuelab_append('<div class="js-v-scope"><foo /></div>');
// optionally: enable less styles compilation
vikseriq\vuelab\VueLab::$use_less = true;

<template>
  <div class="foo">Hello from Vue <span>{{ createdAt }}</span></div>
</template>
<script>
Vue.component('foo', {
  template: template, // ! it allows to pass template inside component
  data: function () {
    return {
      createdAt: new Date().toLocaleTimeString()
    }
  }
})
</script>
<style lang="less">
// feel free to use less here
@justOrange: #fc0;

.foo {
  display: block;
  margin: 1rem auto;
  padding: 1rem;
  width: fit-content;
  // sample use of less variables
  border: 3px outset @justOrange;
 
  // ... and nesting
  span {
    font-style: italic;
  }
}
</style>

然后在页面的底部将出现具有问候语和当前页面加载时间的foo组件。

文档

Vuelab

Vuelab::inject

返回包含Vue组件、样式和启动器的HTML字符串。

通过vuer组合每个组件的脚本+模板包。
将包包装在js函数中，并将绑定到document.vueReady事件上以防止在Vue和vueLauncher准备好之前进行评估。
附加经过修剪的空格和注释的vueLauncher代码。
处理包样式。
如果\VueLab::$use_less已设置，则加载less编译器并处理样式。
附加通过\VueLab::append添加的其余HTML。

Vuer - 使用PHP加载Vue SFC

Vuer用于将*.vue文件转换为浏览器可执行的<script>

受requirejs-vue技术启发。

VueLauncher - 在任何地方创建Vue实例

VueLauncher通过默认选择器.js-v-scope帮助在任何html容器中启动Vue实例。

WordPress插件

通过上传存档到这个仓库或使用优秀的GitHub Updater插件来安装。

当设置\VueLab::$wp_enqueue_vue标志时，Vue将以vue的名称从\VueLab::$wp_vuejs_path指定的路径加载。显然，为了更好的加载时间和与缓存/打包插件一起使用，请提供vue.min.js的本地副本路径。

需要做的事情

[+] 示例项目。

[_] 在构建时通过__v将变量（如字符串翻译）传递给Vue组件。

[+] 将Vuelab作为Composer包提供。

vikseriq / vuelab

维护者

详细信息