Фреймворк Vue.js - идеи и нормальная разработка с webpack
HTML-код
- Опубликовано: 21 ноя 2017
- Простое подключение на страницу. Геттеры и сеттеры - основы реактивности.
Использование vue-cli и сборки webpack-simple. Обзор возможностей Vue на примере разработки арифметического тренажёра. Идеи компонентного подхода.
Скоро старт полного курса по Vue - js.dmitrylavrik.ru/vue/
Блестящий подход. Можете преподавать не только JS но и методику преподавания. Для рунета просто фантастическое качество.
Если что-то не понятно, просто включаю видео Дмитрия.
Спасибо)
Отличный вебинар! Жду с нетерпением курсы по Vue.js
Дмитрий, отличное видео. Талант преподавания у тебя.
Дмитрий как всегда на высоте !
Спасибо за урок .
Спасибо Лаврик ты лучший ведущий на ютуб, приятно смотреть твои видео а больше всего познавать веб с тобой!!!
Преподаватель хорошо и доступно объясняет. Отличное видео, спасибо.
Подробно и доступно! Большое спасибо! После просмотра захотелось продолжить изучение :)
Лучшее видео на просторах рунета, особенно для тех кто только знакомится с Vue.js
Очень крутой фреймфворк, здорово объясняешь. Спасибо!
воу воу воу, как же я мог пропустить выход нового видео. Лайк авансом.
Как всегда - отлично, спасибо
Лучшее видео что я пока видел.
Спасибо, очень здорово!
Спасибо, круто💪
Спасибо !
отлично, всё получилось.
Браво! Наверное лучший курс по Vue.js!
Просто. Красиво. И нескучно!
Супер!
Круто!!!
Интересует разработка на typescript + vuejx + rxjs + vuetify
Сделайте пожалуйста минимальный урок типа Todo на этом стеке,
спасибо за ваши работы!
Dmitry, please Nodejs в студию! ) [ Все кто ЗА, ставим палец в верх! ]
Большой лайк. Отличная подача матереала.
При установке была проблема
vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80
Решаеться вводом в командную строку:
set http_proxy=
set https_proxy=
Особенно порадовал туториал по установке вебпака через node. Раньше думал, что это сверх сложно, а тут пара команд ) Правда перед этим нужно установить :
npm install -g vue-cli
И всё ) Раньше не мог добиться автоматического обновления страницы браузера, а тут всё и сразу.
Спасибо, отличный урок! Хотел бы несколько ложечек дегтя, но они не касаются непосредственно качества урока или крутости самого фреймворка.
1. Утверждение о том, что знание vue, react, angular сразу повышает возможную зарплату или рейт весьма спорно. Либо же тут надо уточнять насколько человек хорошо его знает, ибо пройдя любые курсы и даже имея пару пет-проектов врядли реальный работодатель будет с руками и ногами забирать такого специалиста. Как всегда нужны люди, которые имеют опыт реальной работы с фреймворками и технологиями (из личного опыта)
2. Интересен был момент вначале, когда речь зашла о интернет-магазине и о том, что "в таком случае Vue возможно даже лучше не использовать". Опять же, мой личный опыт показывает что в очень многих случаях для развития бизнеса (для конечного заказчика) и нужны вот такие интернет-магазины, которые весьма успешно (почти всегда) делаются на CMS (тот же Вордпресс). Заказчику не нужны вот эти все опросники, календари, todo-list-ы и прочие проекты, которые обычно учат делать на курсах. С другой стороны. я понимаю что курсы и не должны учить разработчика писать свою социальную сеть или сервис по бронированию авиабилетов в рамках курса. Встает вопрос: а какова целевая аудитория тех, кто собирается писать на Vue? Мне на ум приходят только компании, которые пилят собственный продукт - какие-то сервисы и т.п. Своего рода "энтерпрайз".
Не судите строго - сам являюсь фанатом Vue, но по факту заказы как делал, так и продлжаю делать на Вордпрессе.
П.С. Да, и само собой продолжаю юзать jQuery.
задумался, а стоит ли учить этот vue? для чего он вообще нужен?
Хороший вопрос! Я думаю на него смогут ответить люди, которые использовали его в реальных проектах и получал за это деньги (либо не получал, если это какой-то некоммерческий проект).
Определённо стоит, самый дефолтный кейс таблица данных с множеством фильтров пагинацией и прочими плюшками, в обычной разработке либо используются запросы к серверу который выдает отрендеренную html страницу с применёнными фильтрами и тд, с vue, react и тд можно перенести данную нагрузку на frontend где и будет реализована фильтрация пагинация итд да всё это можно сделать и через jquery но это не так удобно поддерживать серьёзное веб приложение на jquery весьма тяжело, также множество других веб приложений построены именно на vue react и прочих, к примеру vk, сервисы по покупки билетов kupibilet, множество сайтов по гембленгу cs go dota2 итд
ну вам как бы и ни к чему, фигачьте на вордпрессе и дальше, а spa оставьте для других тем, кто этим занимается
НА 1:33:20 проверку на вхождение в массив можно выполнить по-другому ,возможно, кому-то понятней:
if(!res.includes(newRand) или так: if(!(newRand in res)).
А сортиировку так : res.sort(()=>{return 0.5-Math.random();})
p,s, => let newRand = rand (this.x - 20, this.y + 20);
Прогресс бар делается по-легче : bootstrap-vue.js.org/docs/components/progress/
+ и анимация воткнута ;
@@KostiaBazrov Для такого применения нужно бутстрап устанавливать через npm и импортировать, а в видео Дмитрий подключил просто по ссылке
= у мя двоюродный брат Худиев)
@@KostiaBazrov может это мой родной брат?)
@@timurkhudiyev , родных братьев у него вроде нет=)!!!
Он из ОСЕТИИ, есть там корни у тя7
Единственный видеоролик где показали как правильно надо писать на vue....
Лаврик красавчик, уровень объяснения - БОГ. Тебе в педагогику нужно идти. я как июнь который пытается вайти вайти и закрепиться там, мнго всякого пересмотрел, но Лаврик просто красавчик, пишу это после примера "имитация вью замена 1" на двадцать какой то минуте
Мне понравилось, хорошо но мало. Будет повторный курс по vue?
Typescript простой, это тот же js + типизация. Мне Angular нравится. Сейчас для общего развития смотрю и другие фреймворки.
по поводу магазина, react и angular есть же server-side rendering. (наверняка и для vue есть)
Спасибо за видео! Но при просмотре появился один вопрос: если мы в конце собираем билд и отправляем на сервер, то насколько легко поддерживать код? Дополнить новыми компонентами? Каждый раз нужно пересобирать билд?
подскажите пжалуйсто, что может быть состояние на Good Job! не выводится тектом и по кнопке с правильным овтетом просто ноль реакции а в случае с неверным выбрасует переменную с вариантом вопроса ? ((
7:43 пророчество сбылось
топ
Оставлю, для тех, кто за прокси сидит и не имеет возможности его настраивать (сам застрял на часик с этим).
- Для npm настроена прокси (http_proxy/https_proxy) и она пакеты норм скачивает и собирает.
- однако vue init не может скачать шаблон с интернета и дает ошибку connection ...
-разбор выявил, что внутри себя он использует для этого git clone .
Хотя git (у меня Windows и все под miniGW) тоже сам по себе работает из под прокси без проблем, но в данной ситуации - множество настроек не спасли ситуацию. Выход нашелся:
-Устанавливаем шаблоны для vue-cli *локально*:
git clone github.com/vuejs-templates/webpack ~/.vue-templates/webpack
git clone github.com/vuejs-templates/webpack-simple ~/.vue-templates/webpack-simple ... ну и другие (если надо)
После этого не забываем в vue-cli добавлять ключик при инициализации --offline
Например: vue init webpack-simple --offline
Ну и, собственно, изредка обновлять их в домашней директории.
P.S. Извиняюсь за "много букв" (сам застрял на часик с этим) - может кому пригодится...
ЖЕСТКО)) В БАНКЕ ПАШЕШЬ,ПО-ХОДУ+) БЫЛО ДЕЛО,...
написал свой вью с пасьянсом и куртизанками)))
А как эти модули заставить подключаться и работать без серверного режима в мобильном приложении Cordova, например?
blog.pusher.com/how-to-build-an-android-app-using-cordova-and-vue-js/
blog.toast38coza.me/building-a-mobile-app-with-vuejs-cordova-webpack-and-framework-7/
сейчас два решения более лучших: vue-native или nativescript-vue
Добрый день,а скажите такой момент. Среди всех фреймворков, Vue, AngularX(1-5), React. Vue стоит учить, или лучше потратить больше сил и времени на Angular/ React ?
они +- одинаковые. Учи сначала вью, он проще всего. После этого в 10 раз проще освоить все остальное.
Лучше на норм уровне js выучить, потом +- все понятно и по доке учишь быстрее, если в js плаваешь то тяжелей учится. По собственном опыту говорю
а если JQuery норм юзаю, но на чистом JS не пишу(только читаю). Стоит начинать в фреймворки идти?
Желательно понимать js, ведь фреймворки на js написаны а не на jQuery.
Не знаю, актуально ли еще, но отвечу. :)
Вроде как среди фреймворков для изучения советуют выбрать именно Vue js, так как он стремительно набирает популярность. И лучше в любом случае знать чистый js, тогда любые фреймворки освоить будет значительно проще.
спосибо, интересно.
только не вью клай, а вью сиэлай =)
Обычно не пишу комментарии, но не смог удержаться. То чувство, когда не знаешь русский, а учишь произношению по-английски. Всегда радовали такие люди.
клай :D
Я не понял чему равна match и name в 26:08???
Где он размещает ссылки на онлайн трансляцию? Никогда не попадаю. Только на записи тут.
Тоже интересно. Как подписаться на тебя? Есть ли какая-то рассылка?
Добро пожаловать! vk.com/dmitrylavrik
Добро пожаловать! vk.com/dmitrylavrik
Данил Лычкин спасибо, мил человек.
только в вк?
Проект не запустился ни разу после установки вебпака...насколько вообще вебпак важен, просто не первый раз сталкиваюсь с проблемами, но так и не понял является ли PWA полным заменителем
Artem Tantsura попробуй в связке с laravel mix или encore. Вебпак - это геймченжер вообще-то и знать его обязательно в современном фронте. Но настраивать его без обертки - это боль в жопе
Добрый день! не совсем понимаю. когда имеет смысл использовать vue. Если предполагается разработка фронтенд затем бэкенд. тогда vue не надо т.к. слишком геморно совместить. так что-ли. И vue имеет смысл когда фронтенд это конечный продукт. Но на сколько я понимаю проект билдится и на бэкенд отдается уже собранный вариант. и его можно дербанить на php. тогда образно говоря vue и php не встречаются. Или я что-то не понимаю. Поясните пож-ста кто понимает.
При выборе неправильного варианта вместо подстановки нужных значений просто выводится исходный текст: ${this.x} + ${this.y} = ${this.good}! Подскажите в чем может быть причина.
Нашел решение проблемы: вместо стандартных кавычек ' ', нужно поставить обратные ` ` (буква ё).
Можно ли купить курс сейчас? Сами уроки, без консультаций.
Да, вполне. Напишите на info@dmitrylavrik.ru , дам специальную ссылку.
А где ссылки которые автор скидывал в процессе урока?
я прошу прощения, на работе встала задача изучения vue, можно ли в component передавать данные вообще? в какую сторону копать, уже 2 дня нифига найти немогу
Писал я себе на пыхе потихоньку и решил сделать серьезнейший пет-проект
Взялся за ларавел, туда-сюда, и встал вопрос - а как эту всю фигню организовать интерактивней? Ну там выведение каталога как надо и фильтрация поиска и все это без перезагрузок страницы, и тут прям сам ларавел благоволел брать за жабры вью, теперь сижу учу голую ваниль и посматриваю как люди шарящие пишут на вью))
Какая это версия vue?
Файл App.vue и notepade++, и netbeans, и Atom, и Sublime отказываются принимать. Всё равно что в блокноте писать. Что я делаю не так?
c 56 примерно смотри, установить пакет для вью нужно
Cпасибо =)
уже в netbeans настроил.
Всё таки в sublime со VUE удобнее работать
если кому поможет, вот тут ruclips.net/video/qlueo6wFikM/видео.html как устанавливать пакеты на sublime...
люди помогите, на 1:40:59, что означает ${this.x} + ${this.y}, почему используется ${...} ? Почему нельзя просто написать this.x + this.y
Если this.x=5, this.y=10, то this.x + this.y -> 15, а `${this.x} + ${this.y}` -> '5 + 10'. Там цель получить строку для показа пользователю. Без es6 это выглядело бы как this.x + ' + ' + this.y
спасибо, теперь понял, понял что надо ES6 учить))
автор не владеет ангуляром - там тоже есть cli, при этом файлы портянки , про кот автор видео говорит на 40 минуте это треш - в ангуляре это реализовано проще - каждый компонент имеет свою папку
вчера пропустила((((
блииин клаааас
что та, так и не нашел на сайте формы обратной связи или других контактов.
так сразу платить 10кусков, без предварительной договоренности, как то не так...
всё хорошо, но "target" - "таргет", а не "таржет".... и "HTML" - "Эйч Ти Эм Эл", а не "Аш Ти Эм Эл"... и "key" - "ки", а не "кей"... :-(
Про адаптацию ты наверное и не слышал.
не "квещн", а "квэстн"
Ну зачем вебпак... гадость ведь. Каждую версию новый синтаксис.
Я смотрю на это все убожество и просто нету слов. Если смотреть чистый код, то понятно что происходит в программе, что на что ссылается, порядок вызова. Тут же код пишем в 3 разных местах, логику вообще обрабатываем в атрибутах тега, которые предназначены для свойств. Люди склонны все усложнять...
JS - кал