README

要使用 Vue.js 在 1С-Битрикс 中与该库一起使用，您无需安装 node.js 或任何构建依赖项，因为所有的“魔法”都是在 php 上完全完成的。
在 JavaScript 中编写 vue-组件，并使用一行 Vue::includeComponent(['comp1', 'comp2', ...]) 将它们连接起来，并像平常一样在应用程序中使用组件 <comp1></comp1>。

<?php
Dbogdanoff\Bitrix\Vue::includeComponent(['todo-list']);
?>

<div id="app">
    <todo-list></todo-list>
</div>

<script>
  var mainVueApp = new Vue({
    el: '#app'
  })
</script>

# /local/components-vue/todo-list/template.vue:
<template id="todo-list">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</template>

<script>
  Vue.component('todo-list', {
    template: '#todo-list',
    data: function () {
      return {
        todos: [
          {text: 'Изучить JavaScript'},
          {text: 'Изучить Vue'},
          {text: 'Создать что-нибудь классное'}
        ]
      }
    }
  })
</script>

组件结构

/*
local/
└─ components-vue/
    ├─ component-one/
    |   ├─ .settings.php
    |   ├─ template.vue
    |   ├─ script.js
    |   └─ style.css
    ├─ component-two/
    |   └─ template.vue
    └─ component-three/
        └─ script.js
*/

从图中可以看出，整个组件可以描述在一个 script.js 或一个 template.vue 文件中。
与 Vue.js 的某种实现方式相比，开发者们非常熟悉。

示例与演示网站

如果有压缩过的样式或脚本，并且已设置主模块中的相应选项，组件文件夹中将连接到压缩过的文件。

在 .settings.php 中可以指定额外的依赖项，这些依赖项将在连接组件时自动连接

<?
return [
    'require' => [
        'https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js',
        'https://unpkg.com/flickity@2.1.2/dist/flickity.min.css'
    ]
];

组件路径

默认情况下，在 /local/components-vue 文件夹中搜索组件
可以通过声明常量 DBOGDANOFF_VUE_PATH 来更改此行为
对于多站点来说，这可能是相关的。

// Компоненты в корне сайта в директории '/components-vue'
define('DBOGDANOFF_VUE_PATH', '/components-vue');

压缩整个网站的 html 代码

此解决方案可以压缩整个网站的 html 代码，这是对 google pagespeed 性能评估的补充。它还与复合网站技术相结合具有很好的应用，因为代码被缓存，并且不会在每次点击时进行字符串操作。

// Активация минификации, возможно регулировать степень soft или hard
define('DBOGDANOFF_VUE_MINIFY', 'hard');

在哪些情况下应避免使用压缩等级 'hard'？当页面上有脚本行不以分号（';'）结束时，这可能会导致 SyntaxError。应预先分析页面代码并选择合适的模式。

连接 vue.js

目前，使用理念意味着您需要自行在模板的 header.php 中连接来自所需来源和版本的 Vue.js。对于开发者来说，为了使用 Vue Devtools，连接未压缩版本也是合适的，如下所示

if ($USER->IsAdmin()) {
   Asset::getInstance()->addJs('https://cdn.jsdelivr.net.cn/npm/vue@2.6.10/dist/vue.js');
} else {
   Asset::getInstance()->addJs('https://cdn.jsdelivr.net.cn/npm/vue@2.6.10/dist/vue.min.js');
}

需求

Bitrix Vue Component 需要

PHP 7.0.0+
1C-Bitrix 14.0.0+

安装

Bitrix Vue Component 通过 Composer 安装。要将 bitrix-vue-component 添加到您的项目中作为依赖项，您可以

运行以下命令以使用最新稳定版本

    composer require denx-b/bitrix-vue-component

当然，您也可以手动编辑您的 composer.json 文件

{
    "require": {
       "denx-b/bitrix-vue-component": "1.1.*"
    }
}

但最好一次看到，而不是一百次阅读。
演示网站： https://bitrix-vue-demo.dbogdanoff.ru/
网站仓库： https://github.com/denx-b/bitrix-vue-component-demo

denx-b / bitrix-vue-component

维护者

详情

README

组件结构

组件路径

压缩整个网站的 html 代码

连接 vue.js

需求

安装