Небольшое, но удобное для использования Vue.js в bitrix. Решение не подразумевает сборку вообще и подходит для маленьких и средних проектов, и уже показало свою стабильность в продакшн много раз.
Но если вам нужно что-то более специфическое и гибкое, то конечно vue-cli, webpack или bitrix/cli подходит больше, я сам периодически употребляю. Эта статья совсем про другое.
В своём решении я поставил несколько требований:- Компоненты в template.vue файлах, как уже привык с vue-cli;
- Простота подключения компонентов;
- Автоматическое подключение зависимостей;
- Переиспользуемость компонентов между проектами;
- Привычное для bitrix-разработчика поведение.
<?php
Dbogdanoff\Bitrix\Vue::includeComponent(['todo-list']);
?>
<div id="app">
<todo-list></todo-list>
</div>
<sc ript>
var mainVueApp = new Vue({
el: '#app'
})
</sc ript>
|
# /local/components-vue/todo-list/template.vue:
<template id="todo-list">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</template>
<sc ript>
Vue.component('todo-list', {
template: '#todo-list',
data: function () {
return {
todos: [
{text: 'Изучить JavaScript'},
{text: 'Изучить Vue'},
{text: 'Создать что-нибудь классное'}
]
}
}
})
</sc ript>
|
Общая структура компонентов:
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 файле, но в них обязательно должна присутствовать регистрация компонента .
По умолчанию поиск компонентов производится в папке /local/components-vue. Данное поведение можно изменить, объявив константу:
define('DBOGDANOFF_VUE_PATH', '/components-vue'); // поменяли на корень сайта в /components-vue
|
GitHub: (есть более подробное описание работы)
Пример использования: (хорошие примеры разных типов компонентов)
Страница примера:
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
