если кому-то эта тема интересна, можете изучить https://github.com/AleshaOleg/holy-grail-markup

сам собираюсь сейчас так сделать

это не мешает организовывать компонеты в терминах БЭМ

он сказал, что использует только нейминг

я сейчас активно пытаюсь понять как совместить лучшие практики Vue и БЭМ

я активно юзал БЭМ при работы с Angular 1, сейчас решил, что в нем нет необходимости, хотя стандартизации, да, не хватает

@bosenok используя CSS-модули?

мне например совсем не нравится шаблонизация в БЭМ. Ну не могу я писать HTML в виде JSON

возможно. как раз собираюсь почитать о них

никогда раньше не юзал

@ofcourseican ну по сути все по БЭМ-у, просто за тебя все классы проставляются

то есть, можно сказать, что это слой абстракции над БЭМ

@bosenok используя CSS-модули?

я честно говоря не знаю что есть CSS модули...

сами?:) интересно девки пляшут, надо покурить доки

хотя на самом деле - просто более короткий путь к тем результатам, к котрым стремится БЭМ

ну так <style scoped> + vue-loader же

или нет?

по правде говоря я сам еще не пробовал vue-loader, как ни странно

но вроде ж в доках так написано

да да, но я что-то все равно не понял

пацаны в яндексе запили react-bem-core. Выглядит интерересно. Доклад с WSD: Cw?list=PLMBnwIwFEFHdF7aJTIHQ_wJ5tkpyG7CNI

в доках css modules?

хотя на самом деле - просто более короткий путь к тем результатам, к котрым стремится БЭМ

не совсем. кода то больше будет в итоге с сервера тянуться. точнее css'а больше придется качать.

https://youtu.be/sn-H4r6x-Cw

"CSS Module is a CSS file in which all class names and animation names are scoped locally by default." - как и во Vue-компонентах в большинстве случаев

вот. все эти XJST JSX - я считаю извращениями

ну ты пишешь во *.vue файле: <template> <article class="item">...</article> </template> <style scoped> .item { margin: 0 20px; } </style> а он тебе на выходе: <article class="item_498217">...</article> <style>.item_498217 { margin: 0 20px }</style>

в доках css modules?

та не, было упоминание в доках по Vue.js в разделе где *.vue-компоненты упоминались

Но дебажить это чуть сложнее, имхо

"CSS Module is a CSS file in which all class names and animation names are scoped locally by default." - как и во Vue-компонентах в большинстве случаев

так это же оно и есть )

ну ты пишешь во *.vue файле: <template> <article class="item">...</article> </template> <style scoped> .item { margin: 0 20px; } </style> а он тебе на выходе: <article class="item_498217">...</article> <style>.item_498217 { margin: 0 20px }</style>

Потом верстальщице открывать этот файл страшно

ну ты пишешь во *.vue файле: <template> <article class="item">...</article> </template> <style scoped> .item { margin: 0 20px; } </style> а он тебе на выходе: <article class="item_498217">...</article> <style>.item_498217 { margin: 0 20px }</style>

не очень то это хорошо. стиль элемента должен быть написан один раз и быть глобальным

Но дебажить это чуть сложнее, имхо

есть такое, сейчас напишу плагин… )

а вот модификаторы могут быть и в scope

Потом верстальщице открывать этот файл страшно

а чего? верстальщики должны работать с vue файлом, там все окуратно

При использовании однофайловых компонентов, если компонент большой можно подгружать стили, скрипты и template через src

ну ты пишешь во *.vue файле: <template> <article class="item">...</article> </template> <style scoped> .item { margin: 0 20px; } </style> а он тебе на выходе: <article class="item_498217">...</article> <style>.item_498217 { margin: 0 20px }</style>

Подожди, это где такое? scoped в vue не так работает

В доках есть

не очень то это хорошо. стиль элемента должен быть написан один раз и быть глобальным

так в этом же весь БЭМ: "скажем нет глобальным стилям"

Подожди, это где такое? scoped в vue не так работает

вот блин, я как-то не затестил этот момент. а как оно работает?

так в этом же весь БЭМ: "скажем нет глобальным стилям"

там нет такого. там есть "скажем нет каскадам стилей"

Оно data атрибуты добавляет и по ним преобразует css классы

ребят

а зачем слоты

в вуе

можете дать пример или доку

что то найти не могу

что то найти не могу

вот ты хочешь впихнуть что-то конкретное в определенный тег, а у тебя в 1 div есть теги типа <h1> <p> и т.д и т.п

и слоты нужны чтобы запихивать в h1 и p разные данные

<div class="test"></div> <style scoped> .test {...} </style> будет <div data-3f7727f class="test"></div> <style> .test[data-3f7727f] {...} </style> @termosa

из родителя (к примеру)

т.е я смогу дополнять как бы?

или что

доку лучше скиньте)

т.е я смогу дополнять как бы?

не

А самому?

доку лучше скиньте)

я писал пример другу, могу скинуть тебе

ему помогло понять…

я писал пример другу, могу скинуть тебе

кидай конечно. спасибо

сейчас на fiddle какой-нибудь залью…

// component.vue <template> <div class="main"><slot></slot></div> </template> // App.vue <template> <div id="app"> <component>Hello</component> </div> </template> Получится <div id="app"> <div class="main">Hello</div> </div>

https://codepen.io/termosa/pen/MJBxXP?editors=1010

Оно data атрибуты добавляет и по ним преобразует css классы

точно

Не знаю, столько шума вокруг бэма, но у меня такое впечатление складывается, что его юзают только потому, что сами не могут нормально именовать и структурировать

стандартизированное решение это хорошо

Не знаю, столько шума вокруг бэма, но у меня такое впечатление складывается, что его юзают только потому, что сами не могут нормально именовать и структурировать

Тут несколько сложнее. БЭМ это известная, и сейчас слава богу неплохо документированная методология со своим комьюнити. Выбирая БЭМ люди знают что могут притащить в проект новый разработчиков и они будут знать что такое БЭМ и продолжат писать разметку в едином стиле.

ERROR: S client not available

Не знаю, столько шума вокруг бэма, но у меня такое впечатление складывается, что его юзают только потому, что сами не могут нормально именовать и структурировать

у Бэм плюс, приходит человек с улицы, и уже понимает структуру проекта, если по Бэм все сделано, а не свой велосипед

Мелочно, имхо

нет, потому что "понятное именование и структурирование" у каждого разработчика свое

а БЭМ задокументирован

и вокруг этого еще и экосистема написана

Мелочно, имхо

ты просто забиваешь видимо болт и не испытывал боль поддержки больших долгоиграющих проектов

ты просто забиваешь видимо болт и не испытывал боль поддержки больших долгоиграющих проектов

или когда есть несколько верстаков

или когда есть несколько верстаков

в больших проектах их почти всегда несколько. не говоря уже о том что они могут меняться со временем

Так что БЭМ это хорошо. У меня сейчас только одна проблема с ним. Как это совместить с Vue и как не писать шаблоны в виде JS и JS объектов... Если первое стопроцентов решаемо, то касательно вроторого я пока не могу найти решение.

А что заставляет писать шаблоны в виде JS? Я что-то не понял

Сколько проблем из ничего ?

Kelin, вы в большой компании работаете?)

А что заставляет писать шаблоны в виде JS? Я что-то не понял

XJST

Привет всем, парни подскажите, судя по всему нубу, как использовать сторы для реактивного отображения компонентов через v-if и возможно вообще такое?? Вот есть например стор пользователя, при инициализации он пустой, при заходе стейт расширяется данными и в теории должно произойти изменение UI, хотябы изменить вид меню (для неавторизированных и авторизированных). Экшны трегирятся в компоненте страницы, а изменения должны быть видны в куске лейаута, хэдере например. Интересно, что через событийность все ходит — если дернуть метод, который смотрит в стейт стора, а рективности на уровне изменения данных — нет?? чяднт?

mapState/mapActions/mapMutations из Vuex.

Сейчас кину ссылку.

https://vuex.vuejs.org/en/state.html#the-mapstate-helper

computed: mapState([ // map this.count to store.state.count 'count' ])

Значение count из стора будет доступно в компоненте как computed свойство.

mapState/mapActions/mapMutations из Vuex.

не помогает, видимо получается что, меню принимает первоначальный стейт, после идет аякс на сервер, проверяет авторизацию, мутация обновляет стейт, и переход на другую страницу, данные на которой зависят от стора, имеют актуальный вид, а меню, в котором присутствует mapState не изменяется..

computed: { ...mapState(...) } обычно так пишут, хотя это одно и то же посути

А реактивность в Vuex Если вы имеете в виду при обновлении информации внутри самого Vuex, то она есть А изменения из компонента только через commit/dispatch

v-model="$store.state.count" не канает

Это все верно

а проблема-то в чем?

Читая еще раз тут, возможно обнаружил причину, надо проверить. Видимо изза навешивания вушных геттеров и сеттеров через defineProperties, реактивность будет работать только через задание первоначальной структуры

Я же стэйт изначально пустым держал. = {}

таки-да

Ребят, вопрос есть. Я не очень разбираюсь в WebPack. Взял сейчас vue-cli с шаблоном webpack. Как я понял там уже Webpack 2. Мне нужен SCSS. Я установил node-sass и sass-loader, но я НЕ правил конфиг. При этом все само заработало. Это попахивает какой то магией. Вопрос: так и должно быть или все таки стоит дописать что-то в конфиг?

В самом конфиге я не вижу никаких rules для sass/scss