Skip to content

denx-b/bitrix-vue-component

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

Bitrix Vue Component

Для использования Vue.js в 1С-Битрикс с данной библиотекой вам не потребуется установленный node.js и никаких зависимостей для сборки, потому что вся "магия" происходит полностью на php.
Пишите vue-компоненты на JavaScript и подключайте их одной строкой 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

На данный момент, идеология использования подразумевает, что вы самостоятельно подключаете с нужного источника и нужной вам версии Vue.js в header.php шаблона битрикс. Также для разработчика будет уместным подключать не минифицированную версию, для работы с Vue Devtools, следующим образом:

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

Requirements

Bitrix Vue Component requires the following:

Installation

Bitrix Vue Component is installed via Composer. To add a dependency to bitrix-vue-component in your project, either

Run the following to use the latest stable version

    composer require denx-b/bitrix-vue-component

You can of course also manually edit your composer.json file

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

Но лучше один раз увидеть, чем 100500 раз прочитать.
Демо сайт: https://bitrix-vue-demo.dbogdanoff.ru/
Репозиторий сайта: https://github.com/denx-b/bitrix-vue-component-demo

About

Connecting vue components in the bitrix

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages