Спаибо! Наконец то, кто - то объяснил по человечески как подключить webpack с Vue.js. Пробовал подключить через vue - cli, но почему -то там всегда возникают ошибки или проблемы, которые нужно утсранять и голову ломать. По мне такое решение обтимально, контролировать все самому....Лайк * 1000 !!! Бро, ты крут!
У меня несколько вопросов возникло: - Почему такое подключение вью и компонента, а не стандартное: import Vue from 'vue'; import Example from './components/Example.vue'; const app = new Vue({ el: '#app', components: { exampleComponent: Example } }) ? - Еще не очень понятно, зачем window.Vue = require('vue');, вью и так работает - Ну и делать created() хук на простую строку как-то странно, тем более в учебном видео Кстати, можно же делить окно вывода пополам, там рядом с корзиной кнопка) А для npm можно использовать сокращение i вместо install, да и ключи --save-dev зачастую не нужны.
Раз уж тема про Webpack и Vue, то было бы актуально, если бы вы смогли упомянуть и про Laravel Mix. Понимаю что немного не в ту сторону но все же. С вашей конфигурацией вебпака, какое место в этом всем ларавель миксу? Просто не до конца ясна его роль при наличии таких конфигов вебпака как у вас. P.S. За все видео огромное спасибо, очень наглядно и полезно.
Интересный способ использовать vue , прикрутил к своей сборке gulp-webpack (да вот такой я извращениц))) ). Такой вопрос возник , а для чего нужен метод render ecли и без него все нормально работает?
Я посмотрел бы как используя Yii, CakePHP, Laravel, без геморроя использовать Vue вместо JS или JQuery . Vue лезет в разметку, а вы уже написали что-то вроде echo $this->Form->input('name'); что создает свою разметку. Придется отказаться от хэлперов фрэймворка, и помня , что эти хэлперы выдают, повторять это на Vue . Стоит ли того?
В бекенд-фреймворках вроде Yii, Laravel куча своих ограничений и моментов. Написать свой вариант пагинации, сложных таблиц, форм там очень трудоёмкая задача. У меня было 3 сложных проекта на Yii2, чем сложнее логика фронтенда, тем больше хочется отойти от возможностей Yii. С применением реакт-фреймворков нужно перестроить архритектуру. С Бекендом мы будем общаться по API, что даёт нам такие преимущества как: полное разделение бекенда с фронт частью и, как вытекающее, полная свобода действий на фронте. Например, Yii2 навязывает нам использование jquery, как по мне это плохой подход.
спасибо, оптимизация будет. будут сплиты и вендор. в планах на след видео. видео по вью вышло раньше, потому что нужны какие-то библиотеки, чтобы было что оптимизировать наглядно)
А как быть с уже известными плагинами на JQ, типа слайдеры или лайтбоксы и прочее? Есть аналоги на vue? Или разработчики все с нуля пишут? Или смешивают с JQ?
Отличный видос. Но название немного не соответствует содержимому: про использование VueJS (хотя бы о директивах) в верстке (шаблонах) нет почти ничего.
пробовал через vue-cli, но были проблемы, такой вариант считаю более удобным для "настройки под себя" тот же laravel использует такой же подход, взял его оттуда
@@user-oq2hn1rl4r если по vue cli то он дает команду vue в терминале, благодаря которой можно быстро разворачивать приложения на vue. Такие cli есть практически у всех фреймворках. Да, превью курса будет где-то к 15 числам апреля!
Как подключить второй компонент? Vue.component('example-component-2', require('./components/Example2.vue').default); Вот так подключаю, делаю второй файл в components : Example2.vue и чото не работает
Спасибо большое за эти видео, до этого только Gulp использовал, но Webpack понравился больше, с Вашими видео настроил себе сборщик для вёрстки. В комментария к предыдущему видео был разговор о Pug (Jade), Вы планируете его подключать?
Родион Замятин Да, pug будет на весь хтмл и также вью компоненты. Сейчас немного занят, но как освобожусь сразу пойдут новые видео одно из которых будет с пагом)
@@tocode Отлично, спасибо большое) Я щас pug пока сам внедрил, но для многостраничного сайта приходится в плагине HtmlWebpackPlugin, добавлять в ручную название новой страницы, не нашёл можно ли автоматизировать этот процесс, чтобы не приходилось каждый раз прописывать новые страницы.
Родион Замятин тоже пока не нашёл таких способов чтобы один раз и сразу несколько хтмл, но на вебпаке очень легко строить роуты тем же вью, например. На больших проектах только роутер и спасает
а как поставить прослушку на любой файл(html, css, ...), то есть при изменение любого файла перезапускался webpack-dev-server? сейчас перезапускается при изменение в файле .js
скажу минусы уроков, остальное посчитаем за плюсы: 1. не стабильный звук, иногда приходится прислушиваться. 2. длительность урока, можно короче в раза 2, но зато не столь быстрый наплыв информации, не ставишь на паузу, чтобы доосмыслить.
А зачем вообще напрягаться и всё это создавать? Когда можно использовать vue-cli. В терминале прописал vue init webpack или версию по проще vue init webpack-simple и радуйся, всё нужное само установиться и настроиться.
в врёстке vue-cli использовать не получится и плюс vue-cli не подразумевает "тонкую" настройку ибо там все "шаблонно". Хороший пример я прочел на форуме - vue-cli идеально для тестовых задач с собесов, а на реальных проектах будет webpack (из-за пунктов выше)
@@MrLutor скачайте исходники и инициируйте проект, запустите в режиме dev и build, почувствуйте разницу, попробуйте её исправить. Это не рабочая сборка.
если проблема билда заключается в том, что не находит js/css файлы так это из-за слеша вначале, который делает путь относительным. ни одна сборка не будет убирать этот слеш. так на сервере полетит все, что лежит в каталогах. чтобы запустить билд нужно либо скинуть все на сервак, либо установить обычный ххтп сервер глобально и не морочить себе голову. если лень и то и другое то удалить "/" (слеш) у js/css файлов (НО ТОЛЬКО ДЛЯ ТЕСТА)
![[ВАЖНО - Читай описание] Таблица на Vue.js. VUEX+AXIOS+API. Пагинация и сортировка данных.](http://i.ytimg.com/vi/zntx4J9jnb0/mqdefault.jpg)
Спаибо! Наконец то, кто - то объяснил по человечески как подключить webpack с Vue.js. Пробовал подключить через vue - cli, но почему -то там всегда возникают ошибки или проблемы, которые нужно утсранять и голову ломать. По мне такое решение обтимально, контролировать все самому....Лайк * 1000 !!! Бро, ты крут!
Спасибо! Рад,что помогло)
У меня несколько вопросов возникло:
- Почему такое подключение вью и компонента, а не стандартное:
import Vue from 'vue';
import Example from './components/Example.vue';
const app = new Vue({
el: '#app',
components: {
exampleComponent: Example
}
}) ?
- Еще не очень понятно, зачем window.Vue = require('vue');, вью и так работает
- Ну и делать created() хук на простую строку как-то странно, тем более в учебном видео
Кстати, можно же делить окно вывода пополам, там рядом с корзиной кнопка) А для npm можно использовать сокращение i вместо install, да и ключи --save-dev зачастую не нужны.
Очень круто и сжато, спасибо! Курс огонь)
спасибо)
В предыдущих видео по теме у редактора был крупнее шрифт, было удобнее.
Раз уж тема про Webpack и Vue, то было бы актуально, если бы вы смогли упомянуть и про Laravel Mix.
Понимаю что немного не в ту сторону но все же.
С вашей конфигурацией вебпака, какое место в этом всем ларавель миксу?
Просто не до конца ясна его роль при наличии таких конфигов вебпака как у вас.
P.S. За все видео огромное спасибо, очень наглядно и полезно.
Спасибо, что-нибудь придумаем, сам в последнее время работаю с ларавель.
UPD: видео с сплитами (ближе к концу видео) есть ответ
!!!!!!очень крут!!!!!!
спасибо)
Интересный способ использовать vue , прикрутил к своей сборке gulp-webpack (да вот такой я извращениц))) ). Такой вопрос возник , а для чего нужен метод render ecли и без него все нормально работает?
Как называется цветовая схема на твоём visual studio code?) очень красивая
Palenight Theme и seti-icons
Я посмотрел бы как используя Yii, CakePHP, Laravel, без геморроя использовать Vue вместо JS или JQuery . Vue лезет в разметку, а вы уже написали что-то вроде echo $this->Form->input('name'); что создает свою разметку. Придется отказаться от хэлперов фрэймворка, и помня , что эти хэлперы выдают, повторять это на Vue . Стоит ли того?
В бекенд-фреймворках вроде Yii, Laravel куча своих ограничений и моментов. Написать свой вариант пагинации, сложных таблиц, форм там очень трудоёмкая задача. У меня было 3 сложных проекта на Yii2, чем сложнее логика фронтенда, тем больше хочется отойти от возможностей Yii.
С применением реакт-фреймворков нужно перестроить архритектуру. С Бекендом мы будем общаться по API, что даёт нам такие преимущества как: полное разделение бекенда с фронт частью и, как вытекающее, полная свобода действий на фронте.
Например, Yii2 навязывает нам использование jquery, как по мне это плохой подход.
да, комментарий выше полностью отвечает на текущий вопрос и это кстати то, с чем 90% времени разбираемся в курсе tocode.ru/curses/vuejs-s-nylya-do-pro
Круто! Жаль правда, что оптимизации Webpaka ничего не было.
спасибо, оптимизация будет. будут сплиты и вендор. в планах на след видео. видео по вью вышло раньше, потому что нужны какие-то библиотеки, чтобы было что оптимизировать наглядно)
@@tocode Спасибо! Очень ждем!)
🚀 Новый курс по вью 3 - tocode.ru/r/v3-ywd
Введи промокод "Webpack" и получи жирную скидку :)
А как быть с уже известными плагинами на JQ, типа слайдеры или лайтбоксы и прочее? Есть аналоги на vue? Или разработчики все с нуля пишут? Или смешивают с JQ?
Отличный видос.
Но название немного не соответствует содержимому: про использование VueJS (хотя бы о директивах) в верстке (шаблонах) нет почти ничего.
почему ты не устанавливаешь vue-cli? там он сам формерует webpack config и папки.
пробовал через vue-cli, но были проблемы, такой вариант считаю более удобным для "настройки под себя" тот же laravel использует такой же подход, взял его оттуда
@@tocode скажи пожалуйста что такое cli? второй вопрос будет видео превью платного курса по vue ?
@@user-oq2hn1rl4r если по vue cli то он дает команду vue в терминале, благодаря которой можно быстро разворачивать приложения на vue. Такие cli есть практически у всех фреймворках. Да, превью курса будет где-то к 15 числам апреля!
Как подключить второй компонент?
Vue.component('example-component-2', require('./components/Example2.vue').default);
Вот так подключаю, делаю второй файл в components : Example2.vue
и чото не работает
Всем привет, почемуто даже после Алиаса не видит vue webpack. В чем может быть причина? Уже все перепроверил и сверил по сто раз:(
Спасибо большое за эти видео, до этого только Gulp использовал, но Webpack понравился больше, с Вашими видео настроил себе сборщик для вёрстки.
В комментария к предыдущему видео был разговор о Pug (Jade), Вы планируете его подключать?
Родион Замятин Да, pug будет на весь хтмл и также вью компоненты. Сейчас немного занят, но как освобожусь сразу пойдут новые видео одно из которых будет с пагом)
@@tocode Отлично, спасибо большое) Я щас pug пока сам внедрил, но для многостраничного сайта приходится в плагине HtmlWebpackPlugin, добавлять в ручную название новой страницы, не нашёл можно ли автоматизировать этот процесс, чтобы не приходилось каждый раз прописывать новые страницы.
Родион Замятин тоже пока не нашёл таких способов чтобы один раз и сразу несколько хтмл, но на вебпаке очень легко строить роуты тем же вью, например. На больших проектах только роутер и спасает
@@tocode Спасибо, изучу этот момент)
А можно ли в *.vue файлах писать стили в sass (не в scss, как показано в примере) синтаксисе?
да, можно.
привет а как в файлах vue в место scss использовать sass
установи нужные плагины, вместо scss - sass
Нууу, блин. Как читать ясно. А как менять в сторе?))
а как поставить прослушку на любой файл(html, css, ...), то есть при изменение любого файла перезапускался webpack-dev-server? сейчас перезапускается при изменение в файле .js
Так она итак стоит, лайв релод работает хорошо и релодит страницу с каждым изменением vue, css, js, html файлов
@@tocode привет vue - router понадобиться чтобы работать с разными components ?
@@FounderDAO нет
скажу минусы уроков, остальное посчитаем за плюсы: 1. не стабильный звук, иногда приходится прислушиваться.
2. длительность урока, можно короче в раза 2, но зато не столь быстрый наплыв информации, не ставишь на паузу, чтобы доосмыслить.
А зачем вообще напрягаться и всё это создавать? Когда можно использовать vue-cli. В терминале прописал vue init webpack или версию по проще vue init webpack-simple и радуйся, всё нужное само установиться и настроиться.
в врёстке vue-cli использовать не получится и плюс vue-cli не подразумевает "тонкую" настройку ибо там все "шаблонно". Хороший пример я прочел на форуме - vue-cli идеально для тестовых задач с собесов, а на реальных проектах будет webpack (из-за пунктов выше)
Что за редактор ?
vscode
Это не рабочий код, когда между dev и build нужно HTML код менять
не понял, прокомментируй подробнее пож
@@MrLutor скачайте исходники и инициируйте проект, запустите в режиме dev и build, почувствуйте разницу, попробуйте её исправить. Это не рабочая сборка.
если проблема билда заключается в том, что не находит js/css файлы так это из-за слеша вначале, который делает путь относительным. ни одна сборка не будет убирать этот слеш. так на сервере полетит все, что лежит в каталогах. чтобы запустить билд нужно либо скинуть все на сервак, либо установить обычный ххтп сервер глобально и не морочить себе голову. если лень и то и другое то удалить "/" (слеш) у js/css файлов (НО ТОЛЬКО ДЛЯ ТЕСТА)
@@tocode зачем тогда нужен build?