В 22 году столкнулся сначала с проблемой can not find vue-loader/lib/plugin, выполнил npm i vue-loader@15 --save-dev, далее была ошибка options has an unknown property 'contentBase' в webpack.config.js в module.exports вместо 'contentBase' нужно ставить static
за ContentBase спасибо. А с первой ошибкой я разобрался, глянув современный туториал по webpack, там в конфиге вначале поправил строчки таким образом: const path = require('path'); const {VueLoaderPlugin} = require('vue-loader'); main.js с учетом Vue 3 сделал практически в слепую таким образом : import {createApp, h } from 'vue' import App from 'pages/App.vue' import VueResource from 'vue-resource' const app = createApp({ render: () => h(App) }) app.mount('#app') App.use(VueResource) Работало до начала использования vue-resource ($resource), этот функционал убрали из Vue3, пока не нашел как переделать код. $http.put/get/post дает сразу promise, куда запихать функции update, save, delete - не понимаю, если их просто вырезать из когда, оставив дальнейшие then, не работает, на большее пока фантазии не хватило, очевидно, должна использоваться какая то совсем другая логика.
Чтобы выполнить данный урок в апреле 2022 года, я выполнил следующие действия: 1. Использовал версию nvm 8.17.0 (carbon). Используя последнюю stable версию nvm 18.0.0, у меня ничего не получалось, что бы я ни прописывал в консоли, и какие версии компонентов я бы не использовал 2. Все версии компонентов я ставил точно такие же, как приведены в уроке: add vue@^2.5.17 vue-resource@^1.5.1 и yarn add -D webpack@^4.17.2 webpack-cli@^3.1.0 webpack-dev-server@^3.1.7 babel-loader@^8.0.2 @babel/core@^7.0.0 @babel/preset-env@^7.0.0 vue-loader@^15.4.1 vue-template-compiler@^2.5.17 3. Если вы устанавливали компоненты из nvm 18.0.0, то нужно их сначала удалить: yarn remove vue vue-resource и yarn remove -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env vue-loader vue-template-compiler, а затем установить из под nvm 8.17.0 согласно пункту 2 4. Чтобы nvm работала в консоли intellij idea нужно в настройках Windows: Этот компьютер - Свойства - Дополнительные параметры системы - Переменные среды - Системные переменные - Path: Прописать путь к nvm: C:\Users\.......\.nvm\versions ode\v8.17.0\bin
[2/4] Fetching packages... error sockjs-client@1.6.1: The engine "node" is incompatible with this module. Expected version ">=12". Got "8.17.0" error Found incompatible module.
Самое интересное в этом гайде это непонятные ошибки которых нету в ролике, для новичка это просто космос. Максимальная проверка твоих сил) Слабых духом сразу сносит.
Ура! У меня запустилось после переустановки IDEA! Однофайловые компоненты - это круто. Я уж думал на Vue мазохисты пишут конкатенируя строчки шаблонов)
Спасибо за видео. Чего все так парятся что нифига с фронтом непонятно? Я смотрю видосы из-за Спринга, там я докапываюсь и разбираю каждую строчку, а код из этого видео я тупо скопировала и не вникала(всеравно по одному видео вью и вебпак не разберешь, а углубляться нет ни времени, ни желания, ни потребности) Ну автору же нужно разобрать полноценное приложение, вот и выходят такие видосы, где все очень быстро и непонятно, т.к. это совсем другая тема. Андрей, отдельное спасибо за ссылки под видео!!!
Спасибо вам огромное за качественные и очень информативные уроки. Еще не встречал такой легкий для понимания и достаточно динамичный материал. Хотелось бы спросить, в этой серии уроков будут рассматриваться vue router? Очень хочется чтоб ваши уроки продолжались и дошли , возможно, до приближенной к релизной версии программы! Очень ждем новые уроки!
Небольшие советы для тех, у кого ничего не работает: 1) В main.js новый объект (компонент) не Vuew, a Vue. 2) Сразу удалите неправильный скрипт (см. на 5:20). 3) Сразу через yarn (вместе со всем остальным) установите vue-template-compiler Мне пришлось удалять все приложение, откатываться к старому коммиту. Потом сделал так, как пишу в комментарии и все заработало. Возможно конечно изначально у меня где-то ошибка была, не знаю)
порядок мы тут наводили, разбивали код на модули, снимали с себя головную боль по поводу сборки интерфейса. Webpack - это что-то вроде gradle для js, только на стероидах
@@letsCodeDru можно больше внимание беку уделять? Всё таки тема уроков спринг, а занимаемся большую часть времени фронтом. Не всем разработчикам бекенда нужно так глубоко погружаться во фронтэнд. Спасибо!
Вот был gulp. Все было нормально, плагины поставил, таски настроил. Я вот смотрю на этот webpack и с этой стороны и с той. Вообще не пойму в чем его основная фишка
Это все удобно, но становится уже не юзабельно. Просто с твоей стороны ты пишешь этот код не первый раз,, и тебе все понятно и очевидно, а зрители обучаются, и им нужно и время, и больше информации, что как происходит, возможные баги, и т.д. То есть, такой проект сделать можно, но узнать, как это работает нет. Upd. Но как сжатая энциклопедия очень круто все равно)
Прежде чем смотреть видос, сначала смотрю комменты) Кстати для винды рекомендую поставить ubuntu bash с офф магазина windows (в инете посмотрите установку), а потом прямо в консоли идеи пишем bash, и уже ставим то, что нам нужно (nvm и т.д.)
не совсем понятно какие образом вы работаете с yarn через консоль Idea, при этом ещё и формируется package.json в самом проекте((( как-то это непонятно. И есть вопрос, может вы знаете как можно данный вариант работы с консолью реализовать в Eclipse для EE разработки, потому что очень нужно, а толковой инфы нет(
Спасибо автору огромное. Для любителей окон 10, если вы ловите - " 'yarn' is not recognized as an internal ..." в терминале, можете вот такой командой установить: npm install yarn -g ( вот тут подсмотрел, там вроде получше решение есть github.com/yarnpkg/yarn/issues/4199, а на соседнее похожее исью вообще Яков Файн отвечал, что мол пафы надо прописывать просто..). Проверить можно так: yarn --version, а дальше уже по видео можно двигаться..
Народ, может кому пригодится инфа. Проверить что вы установили в идее через yarn Settings/Languages and Frameworks/Node.js. Я три дня просидела с ошибкой Uncaught SyntaxError: Unexpected identifier. И ссылается на 1-ю строчку main.js (import Vue). Все файлы тупо копировала, ошибки быть не может, перекачивала все библиотеки, думала вопросы в версиях или хз. оказалось в контроллере @Value фигурную скобку закрыла круглой!!! Капец, гребаная скобка и три дня!!!! хочется бится головой об стенку, как так... Вобщем я к тому что будьте ооочень внимательны, даже если почти все копируете)))
True. В такие моменты хочется все бросит и уйти в горы пасти овец. Зато, после того, как разберёшься, такая радость и раскаяние :) Молодец, что не сдалась, далеко пойдёшь
Собрать отдельное приложение на спринге с необходимым api, написать необходимое приложение с vue.js, которое будет слать запросы к ресту, в чем проблема то?)
Тоже случился косяк. При импорте VueResource получал ошибку в консоли "Cannot redefine property: $url". Потом увидел, что забыл убрать подключение скриптов vue и vue-resource в main.html)
Как по мне предпочительнее полностью отделять фронт от бэкенда, отсюда возникает вопрос, как реализовать авторазацию через рест, а не редиректы спринга?
@letsCode, подскажите пожалуйста, что за магия когда быстро удаляются одинарные кавычки с '+' из набора конкатенированных строк в единый String (когда переносим темплейтную часть в single vue file template?). Спасибо =)
изначально лучше писать строки в js в ` ` - бектики (на клавиатуре слева от 1), тогда не нужна вся эта конкатенация с + а переменные в такие строковые щаблоны передаются с помощью ${}
Маленький гайд для тех, у кого Винда и кто совсем не одупляет, что делать. Идем сюда: github.com/coreybutler/nvm-windows . Качаем nvm и устанавливаем его. Дальше из cmd(лучше из администратора?) пишем: nvm install latest + плюс ставим yarn. Можете проверить установку командой nvm version. Технически, этого должно хватить, чтобы продолжить работать дальше по видео drucoder-а. Мне помогло. Но предупреждаю сразу, я не гарантирую, что дальше не полезут горбыли, плюс, не гарантирую, что вам это поможет. А и ещё, дальше на комьюнити идее делать нечего, так как она не схавает файлы с расширением .vue
Установка в 2022 (винда): 1. Ставим автоинсталлятором nodejs nodejs.org/en/ (он также поставит и npm) 2. Потом в командной строке (запускал от админа) ставим yarn командой отсюда classic.yarnpkg.com/en/docs/install#windows-stable npm install --global yarn 3. В терминале IDEA в проекте пишем: yarn init yarn add vue vue-resource yarn add -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env vue-loader vue-template-loader
Хорошее видео, а есть пример как такое сделать но только без Vue, a с такой сборкой Spring Boot + Thymeleaf? на уже существующем прокте просто соптимизировать все зависимости, просто в проект притянут полностью Bootstrap 4 со всеми зависимостями, а на проекте используется только 5% от силы. Как в таком случае поступаить и минимизировать все засимости. спасибо
В каком то моменте у меня перестали работать JS файлы, пришлось отмотать назад, чтобы понять что помимо компиляции Java кода, нужно ещё стартовать npm start
Вылезает ошибка. Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"? Вообще мне не нравится такой подход. Почему нельзя было сразу начать с этого? В первом же видео в контроллере сделать 1 метод получения одного сообщения и все. И начать крутить webpack и СРАЗУ писать правильный код. Пускай простой, но с разбиением на компоненты и тд. И акцентировать внимание больше на взаимодействии фреймворка с сервером (такой инфы я не нашел), а то что там на самой странице этот vue (и реакт и ангуляр) можно как хочешь крутить - этого у них в документации навалом инфы. А как работать с сервером - шиш. не понятно что в веб конфиге происходит. нашел что-то типа разбора (medium.com/@siddharthac6/getting-started-with-react-js-using-webpack-and-babel-66549f8fbcb8) правда для реакта. не помогло. ну вообще конечно цирк. Чтобы заработало А, нужно устнановить В, С и D а для них еще потребуется вот такая и такая библиотека, 100500 команд и 100501-ая, но там нюанс будет. Если вы на линуксе то один нюанс, на винде - другой нюанс. Ай, подождите, этот мануал уже устарел. Учите другой... А код то когда писать?
По-моему, подход уникальный. Показывает действия разработчика когда нужно что-то улучшить или изменить. package.json и webpack.config.js разбирались достаточно подробно в видео про сам webpack (ссыль в уроке имеется). Мне пришлось его прорабатывать перед этим видео, т.к. без него действительно ничего не понятно. Взаимодействие с сервером(с бакэндом на Java) рассматривалась в предыдущих видео. Собственно, там несколько команд всего лишь и рассматривать то особо нечего. Ну а про то, что нужно скачивать кучу необходимых зависимостей для того, чтобы написать простейший код, ещё статья прикольная была. ))) habr.com/post/312022/
Народ, может, кто знает. Непонятно для меня, почему недавно при логинизации начало падать приложение. Выдает 401-ошибку и надпись Unauthorized . Хотя запрос на /message успешно перенаправляется на гугл-авторизацию. Затем идет запрос на /login и вот тут и все падает. При том, что еще неск. дней назад все работало. С чем может быть проблема?
Подскажите, пожалуйста, что почитать для добавления уведомлений которые бы выскакивали даже на других вкладках, как, например у google календаря при приближении события
Столкнулся с проблемой: Cross-Origin Read Blocking (CORB) blocked cross-origin response accounts.google.com/o/oauth2/v2/auth?client_id=... Может кто-то знает, как решается? Не хочет показывать совсем содержимое main.js файла А как даже прогуглить эту проблему, нет мыслей
Я не знаю, может это только у меня, но я могу запускать командой "npm start" без ошибок только непосредственно находясь в одной директории с "main.js" (Убунту). И вопрос, так и должно быть или я что-то упустил в настройках?
уфф разобрался наконец. почти две недели убил на настройку и вникание в логику. получается с помощью webpack мы как бы создаем структуру внутри js и потом можем как кирпичики использовать кусочки для построения фронта. и еще вопрос - получается обязательно перед запуском локально проекта сначала предварительно запускать nvm start. без этого никакой js не подгружает?
Андрей, здравствуйте! Сейчас пересматриваю данный плейлист, и у меня возник достаточно тупой вопрос : можно ли использовать Vue.js для многостраничных приложений?
Блин, мучаюсь уже второй день. В консоли браузера: Uncaught SyntaxError: Unexpected identifier. И ссылается на 1-ю строчку main.js (import Vue). Как я понял, либо дело в пакетах, либо webpack.config.js. Сталкивался кто?
Никак не могу понять, почему моя страница сразу не обновляется при сохранении и обновлении, только если вручную обновить все появляется, пока накостылял location.reload() но мне кажется это не дело
Вдруг может кому пригодится, если будет похожая ошибка - "ERROR in ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resou rces/static/js/pages/App.vue?vue&type=script&lang=js&) Module not found: Error: Can't resolve 'components/messages/MessageList' in 'C:\Java\letscode\RESTSarafan\sarafan\src\main esources\static\js\pages' @ ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/s tatic/js/pages/App.vue?vue&type=script&lang=js&) 13:0-59 16:18-30 @ ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js& @ ./src/main/resources/static/js/pages/App.vue @ ./src/main/resources/static/js/main.js", тогда внимательно проверяйте название файлов .vue! Мой пример - в папке \components\messages лежало три файла, два из них назывались MessageRow.vue и MessageForm.vue, а третий назывался MessageList(почему то расширение было скрыто), при этом все три файла и Intellij Idea отображались правильно.
Все супер и классно! Спасибо за труд. PS. Понять не могу почему не обновляется список сообщений после добавления/редактирования, а надо перезагружать страницу Еще раз спасибо
Я и не спорил с тобой))) Просто пытался тебя понять, что именно непонятно тебе в видосе. Логика взаимодействия чего и с чем? Логика взаимодействия компонентов Vue.js? Логика взаимодействия фронта с бэком? Ты высказал своё мнение, что было бы не плохо "чутка хотя бы разжёвывать...", я задал, вполне нормальный вопрос...
у меня доступ к скрипту в index.html идет если только укажу localhost:8000 / bundle.js. Серверная часть работает на порту 8080, а клиентская на 8000. Как дать доступ к скрипту без указания порта клиентской части и разрешение прописано allowedHosts:[ 'localhost:8080']
тестирование под нагрузкой буду рассматривать, но не факт, что на примере этого приложения. Сколько пользователей - зависит от железа и того, какой функционал будет реализован. Но в целом - не стоит заморачиваться с нагрузкой до тех пор, пока приложение не начнёт подавать признаки хоть какой-то нагрузки, т.к. никогда не угадаешь, где в конкретном приложении вылезет bottleneck. Стоит помнить, что преждевременная оптимизация - это антипаттерн
@@letsCodeDru Как я понимаю, человеку (и многим людям тоже) интересно в первую очередь не как оптимизировать проект, а как тестировать под нагрузкой(как происходит этот процесс, какие инструменты используются, какой код пишется и т.д.).
@@letsCodeDru Разве сарафан это REST? Мне казалось, что в REST не должно быть примесей от MVC, т.к. MVC полностью завязан на бакэнд (который в нашем случае Java). Т.е. в любой момент можно взять и заменить бакэнд на, например, бакэнд, написанный на C#, а фронт этого даже не заметит. Или наоборот, вместо браузера подключить интерфейс, написанный на том же C#
Откати все зависимости как у автора, перепиши версии. Удали yarn.lock, и дальше так как я не очень знаком с yarn перезаписал зависимости через npm i, создался package-lock.json, ошибки пропали) Спасибо автору)) Контент супер)
если кто-то делает по мануалу, то лучше установите vue-loader версии как у автора, а то есть yarn add -D vue-loader@15.4.1 или если уже установили актуальную версию можете прописать в терминале: yarn upgrade vue-loader@15.4.1 Ну или же просмотреть путь файла plugin.js в папке node_modules/vue-loader и прописать в require. Надеюсь кому-то поможет
первый вариант вызвал другую ошибку Cannot find module 'webpack/lib/RuleSet'. Второй вариант вызвал ошибку: VueLoaderPlugin is not a constructor, после того как я пошарился и поменял строку const VueLoaderPlugin = require('vue-loader/dist/plugin');
Если вы настроены решительно, то вот здесь есть обширная инструкция github.com/jonashackt/spring-boot-vuejs . Это все равно не супер просто, но лучше ничего не находилось
Андрей, еще раз здравствуйте! Все сделал по уроку, но вылетает подобная фишка. Не подскажете, може ли это быть связано с версиями используемого ПО в зависимостях? Спасибо Access to script at 'accounts.google.com/o/oauth2/v2/auth?client_id=975346796694-25nlfsl8a41jhib6hv7id1s2gdqqd8e5.apps.googleusercontent.com&redirect_uri=localhost:8080/login&response_type=code&scope=openid%20email%20profile&state=t5Rf1D' (redirected from 'localhost:8080/js/main.js') from origin 'localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. accounts.google.com/o/oauth2/v2/auth?client_id=975346796694-25nlfsl8a41jhib6hv7id1s2gdqqd8e5.apps.googleusercontent.com&redirect_uri=localhost:8080/login&response_type=code&scope=openid%20email%20profile&state=t5Rf1D:1 Failed to load resource: net::ERR_FAILED
Нууууууууу, ребята, это твердый дизлайк. На лету мимоходом говорится про целый пласт сложнейших вещей, которые совершенно не относятся к Java и Spring Boot. Вы меня простите, но если уже делать курс на такой базе, нужно как то включать подачу тех знаний и логики, которые относятся ко всем упомянутым технологиям. Это не просто html, css, js, эти техники по значительности требуют не менее пристального изучения, чем Spring, а по объему - даже БОЛЬШЕГО. Смысла не понимаю так давать материал. С другой стороны, если кто уже владеет этими технологиями в совершенстве - неужели его устроит подача Спринга на таком уровне?! А кто не владеет - пойдет их изучать и вернется сюда через год, забыв уже все на свете. Конечно, можно откатиться на ранние версии и тупо повторить все за автором, но это не обучение, а ..... И все для того чтобы красоту навести? Зачем? Лучше закончить со спрингом, путь итог будет деревянным, но понятным и разобранным до основания. Путь мы бы видели на странице json ы сплошные. И отдельно разбирать уже украшения. Или отдельно пилить подробные видео про все упомянутые технологии и рекомендовать изучать их ДО данного курса сразу же, в описании. А тут все по верхам, я считаю. Никакого глубокого понимания. Все обо всем и ни о чем. Жаль. Придется уходить наверное, не нравится мне, как попугаю просто тупо копировать и вставлять.
если вы все уже установили надо обновить все зависимости и поставить версии как у автора. Версии можно посмотреть в package.json НП: yarn upgrade vue-loader@15.4.1
В 22 году столкнулся сначала с проблемой can not find vue-loader/lib/plugin, выполнил npm i vue-loader@15 --save-dev, далее была ошибка options has an unknown property 'contentBase' в webpack.config.js в module.exports вместо 'contentBase' нужно ставить static
Спасибо, твой коммент мне очень помог!)
спасибо!
за ContentBase спасибо. А с первой ошибкой я разобрался, глянув современный туториал по webpack, там в конфиге вначале поправил строчки таким образом:
const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');
main.js с учетом Vue 3 сделал практически в слепую таким образом :
import {createApp, h } from 'vue'
import App from 'pages/App.vue'
import VueResource from 'vue-resource'
const app = createApp({
render: () => h(App)
})
app.mount('#app')
App.use(VueResource)
Работало до начала использования vue-resource ($resource), этот функционал убрали из Vue3, пока не нашел как переделать код. $http.put/get/post дает сразу promise, куда запихать функции update, save, delete - не понимаю, если их просто вырезать из когда, оставив дальнейшие then, не работает, на большее пока фантазии не хватило, очевидно, должна использоваться какая то совсем другая логика.
Чтобы выполнить данный урок в апреле 2022 года, я выполнил следующие действия:
1. Использовал версию nvm 8.17.0 (carbon). Используя последнюю stable версию nvm 18.0.0, у меня ничего не получалось, что бы я ни прописывал в консоли, и какие версии компонентов я бы не использовал
2. Все версии компонентов я ставил точно такие же, как приведены в уроке: add vue@^2.5.17 vue-resource@^1.5.1 и yarn add -D webpack@^4.17.2 webpack-cli@^3.1.0 webpack-dev-server@^3.1.7 babel-loader@^8.0.2 @babel/core@^7.0.0 @babel/preset-env@^7.0.0 vue-loader@^15.4.1 vue-template-compiler@^2.5.17
3. Если вы устанавливали компоненты из nvm 18.0.0, то нужно их сначала удалить: yarn remove vue vue-resource и yarn remove -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env vue-loader vue-template-compiler, а затем установить из под nvm 8.17.0 согласно пункту 2
4. Чтобы nvm работала в консоли intellij idea нужно в настройках Windows: Этот компьютер - Свойства - Дополнительные параметры системы - Переменные среды - Системные переменные - Path: Прописать путь к nvm: C:\Users\.......\.nvm\versions
ode\v8.17.0\bin
Спасибо тебе огромное, весь день и ночь пытался сделать, ничего не выходило , но когда увидел твой коммент, пару минут и всё готово, спс тебе!!
[2/4] Fetching packages...
error sockjs-client@1.6.1: The engine "node" is incompatible with this module. Expected version ">=12". Got "8.17.0"
error Found incompatible module.
Самое интересное в этом гайде это непонятные ошибки которых нету в ролике, для новичка это просто космос.
Максимальная проверка твоих сил) Слабых духом сразу сносит.
Разобрался? можеть скинуть свой гит?
Суперкурс! Некоторые видео часами на паузе прохожу - пока все ошибки разгребешь,пока что-то по-своему переделаешь, доку разгребешь...
Cпасибо Вам за урок!
Было непросто, особенно с частью консоли. С помощью Chocolatey удалось сделать консоль подобно линуксовой.
Спасибо! Отличный и лаконичный материал!
Очень полезное видео. Давно хотел пощупать связку spring boot + vue
Пересматриваю по несколько раз - помогает!
Ура! У меня запустилось после переустановки IDEA! Однофайловые компоненты - это круто. Я уж думал на Vue мазохисты пишут конкатенируя строчки шаблонов)
Спасибо большое!) Это был просто восхитительный урок!)))
Спасибо за видео. Чего все так парятся что нифига с фронтом непонятно? Я смотрю видосы из-за Спринга, там я докапываюсь и разбираю каждую строчку, а код из этого видео я тупо скопировала и не вникала(всеравно по одному видео вью и вебпак не разберешь, а углубляться нет ни времени, ни желания, ни потребности) Ну автору же нужно разобрать полноценное приложение, вот и выходят такие видосы, где все очень быстро и непонятно, т.к. это совсем другая тема. Андрей, отдельное спасибо за ссылки под видео!!!
Если у кого падает на options has an unknown property 'contentBase'.
Надо заменить на static: './dist',
Спасибо вам огромное за качественные и очень информативные уроки. Еще не встречал такой легкий для понимания и достаточно динамичный материал. Хотелось бы спросить, в этой серии уроков будут рассматриваться vue router? Очень хочется чтоб ваши уроки продолжались и дошли , возможно, до приближенной к релизной версии программы! Очень ждем новые уроки!
Будет и роутер и vuex
Ничего не понял, но было интересно ))
Небольшие советы для тех, у кого ничего не работает:
1) В main.js новый объект (компонент) не Vuew, a Vue.
2) Сразу удалите неправильный скрипт (см. на 5:20).
3) Сразу через yarn (вместе со всем остальным) установите vue-template-compiler
Мне пришлось удалять все приложение, откатываться к старому коммиту. Потом сделал так, как пишу в комментарии и все заработало.
Возможно конечно изначально у меня где-то ошибка была, не знаю)
На этом видео я сломался )) Не то чтобы я что-то не понял, я вообще не понял что происходит, что мы делаем, зачем... Лучше пойду свитер поковыряю.
порядок мы тут наводили, разбивали код на модули, снимали с себя головную боль по поводу сборки интерфейса. Webpack - это что-то вроде gradle для js, только на стероидах
Ага, "нет воды" - хрен проглотишь))))
@@ВадимВалунский Ахаха, какое точное выражение, надо запомнить )))))))))
@@letsCodeDru можно больше внимание беку уделять? Всё таки тема уроков спринг, а занимаемся большую часть времени фронтом. Не всем разработчикам бекенда нужно так глубоко погружаться во фронтэнд. Спасибо!
Вот был gulp. Все было нормально, плагины поставил, таски настроил. Я вот смотрю на этот webpack и с этой стороны и с той. Вообще не пойму в чем его основная фишка
Это все удобно, но становится уже не юзабельно. Просто с твоей стороны ты пишешь этот код не первый раз,, и тебе все понятно и очевидно, а зрители обучаются, и им нужно и время, и больше информации, что как происходит, возможные баги, и т.д. То есть, такой проект сделать можно, но узнать, как это работает нет. Upd. Но как сжатая энциклопедия очень круто все равно)
Все разбирать подробно - не очень хорошо. Я показываю, как крутить левую педаль, вы додумаваете остальное, набивая шишки. :)
Прежде чем смотреть видос, сначала смотрю комменты) Кстати для винды рекомендую поставить ubuntu bash с офф магазина windows (в инете посмотрите установку), а потом прямо в консоли идеи пишем bash, и уже ставим то, что нам нужно (nvm и т.д.)
Гитбаш, который идет в комплекте с гитом тоже ок.
не совсем понятно какие образом вы работаете с yarn через консоль Idea, при этом ещё и формируется package.json в самом проекте((( как-то это непонятно. И есть вопрос, может вы знаете как можно данный вариант работы с консолью реализовать в Eclipse для EE разработки, потому что очень нужно, а толковой инфы нет(
Спасибо автору огромное. Для любителей окон 10, если вы ловите - " 'yarn' is not recognized as an internal ..." в терминале, можете вот такой командой установить: npm install yarn -g ( вот тут подсмотрел, там вроде получше решение есть github.com/yarnpkg/yarn/issues/4199, а на соседнее похожее исью вообще Яков Файн отвечал, что мол пафы надо прописывать просто..). Проверить можно так: yarn --version, а дальше уже по видео можно двигаться..
Спасибо!!! Помог
Спасибо, помогло.
благодарю
спасибо!
Народ, может кому пригодится инфа. Проверить что вы установили в идее через yarn Settings/Languages and Frameworks/Node.js. Я три дня просидела с ошибкой Uncaught SyntaxError: Unexpected identifier. И ссылается на 1-ю строчку main.js (import Vue). Все файлы тупо копировала, ошибки быть не может, перекачивала все библиотеки, думала вопросы в версиях или хз. оказалось в контроллере @Value фигурную скобку закрыла круглой!!! Капец, гребаная скобка и три дня!!!! хочется бится головой об стенку, как так... Вобщем я к тому что будьте ооочень внимательны, даже если почти все копируете)))
True. В такие моменты хочется все бросит и уйти в горы пасти овец. Зато, после того, как разберёшься, такая радость и раскаяние :)
Молодец, что не сдалась, далеко пойдёшь
Спасибо Вашему комментарию, точно такая ошибка была, сидел 2 часа и искал, оказалось забыл поставить $ перед кавычками
если не собирается проект webpack и выдает ошибку, не может найти vue-loader/lib/plugin. сделайте rollback сборщика npm i vue-loader@15 --save-dev
Как сделать так чтоб Vue.js и Spring Boot были два независимых приложения и общались только через REST?
Собрать отдельное приложение на спринге с необходимым api, написать необходимое приложение с vue.js, которое будет слать запросы к ресту, в чем проблема то?)
Тоже случился косяк. При импорте VueResource получал ошибку в консоли "Cannot redefine property: $url". Потом увидел, что забыл убрать подключение скриптов vue и vue-resource в main.html)
Очень благодарен за видео уроки! Когда ждать продолжение? )))
Стараюсь каждую неделю выкладывать.
Спасибо. Очень крутые видео!
Как по мне предпочительнее полностью отделять фронт от бэкенда, отсюда возникает вопрос, как реализовать авторазацию через рест, а не редиректы спринга?
@letsCode, подскажите пожалуйста, что за магия когда быстро удаляются одинарные кавычки с '+' из набора конкатенированных строк в единый String (когда переносим темплейтную часть в single vue file template?). Спасибо =)
изначально лучше писать строки в js в ` ` - бектики (на клавиатуре слева от 1), тогда не нужна вся эта конкатенация с + а переменные в такие строковые щаблоны передаются с помощью ${}
спасибо за видео
Отличное видео! Только подскажите, как это потом деплоить? Или сделайте видео, пожалуйста
thx for the lesson
Маленький гайд для тех, у кого Винда и кто совсем не одупляет, что делать. Идем сюда: github.com/coreybutler/nvm-windows . Качаем nvm и устанавливаем его. Дальше из cmd(лучше из администратора?) пишем: nvm install latest + плюс ставим yarn. Можете проверить установку командой nvm version. Технически, этого должно хватить, чтобы продолжить работать дальше по видео drucoder-а.
Мне помогло. Но предупреждаю сразу, я не гарантирую, что дальше не полезут горбыли, плюс, не гарантирую, что вам это поможет. А и ещё, дальше на комьюнити идее делать нечего, так как она не схавает файлы с расширением .vue
Установка в 2022 (винда):
1. Ставим автоинсталлятором nodejs nodejs.org/en/ (он также поставит и npm)
2. Потом в командной строке (запускал от админа) ставим yarn командой отсюда classic.yarnpkg.com/en/docs/install#windows-stable
npm install --global yarn
3. В терминале IDEA в проекте пишем:
yarn init
yarn add vue vue-resource
yarn add -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env vue-loader vue-template-loader
Хорошее видео, а есть пример как такое сделать но только без Vue, a с такой сборкой Spring Boot + Thymeleaf?
на уже существующем прокте просто соптимизировать все зависимости, просто в проект притянут полностью Bootstrap 4 со всеми зависимостями, а на проекте используется только 5% от силы. Как в таком случае поступаить и минимизировать все засимости.
спасибо
И ещё хотелось бы реализовать авторизацию через токен ключ JWT auth0. Так как нет в интернете нормального обьяснения.
Боль, кровь, страдания , 9 часов решение всех сопутствующих моментов, и крудилка на vue готова!) на java делаю за 15 мин)
В каком то моменте у меня перестали работать JS файлы, пришлось отмотать назад, чтобы понять что помимо компиляции Java кода, нужно ещё стартовать npm start
Вылезает ошибка. Error: Cannot find module 'babel-preset-env' from '...'
- Did you mean "@babel/env"?
Вообще мне не нравится такой подход. Почему нельзя было сразу начать с этого? В первом же видео в контроллере сделать 1 метод получения одного сообщения и все. И начать крутить webpack и СРАЗУ писать правильный код. Пускай простой, но с разбиением на компоненты и тд. И акцентировать внимание больше на взаимодействии фреймворка с сервером (такой инфы я не нашел), а то что там на самой странице этот vue (и реакт и ангуляр) можно как хочешь крутить - этого у них в документации навалом инфы. А как работать с сервером - шиш.
не понятно что в веб конфиге происходит. нашел что-то типа разбора (medium.com/@siddharthac6/getting-started-with-react-js-using-webpack-and-babel-66549f8fbcb8) правда для реакта. не помогло.
ну вообще конечно цирк. Чтобы заработало А, нужно устнановить В, С и D а для них еще потребуется вот такая и такая библиотека, 100500 команд и 100501-ая, но там нюанс будет. Если вы на линуксе то один нюанс, на винде - другой нюанс. Ай, подождите, этот мануал уже устарел. Учите другой... А код то когда писать?
По-моему, подход уникальный. Показывает действия разработчика когда нужно что-то улучшить или изменить.
package.json и webpack.config.js разбирались достаточно подробно в видео про сам webpack (ссыль в уроке имеется). Мне пришлось его прорабатывать перед этим видео, т.к. без него действительно ничего не понятно.
Взаимодействие с сервером(с бакэндом на Java) рассматривалась в предыдущих видео. Собственно, там несколько команд всего лишь и рассматривать то особо нечего.
Ну а про то, что нужно скачивать кучу необходимых зависимостей для того, чтобы написать простейший код, ещё статья прикольная была. ))) habr.com/post/312022/
Как ты решил проблему error:cannot find module babel preset env пожалуйста если знаешь скажи
@@antihype3450, нашли решение проблемы?
@@НиколайЦикунов da nujno otdelno zaqruzit moduli ,koqda vse vmeste kasha polucaetsa
Народ, может, кто знает.
Непонятно для меня, почему недавно при логинизации начало падать приложение. Выдает 401-ошибку и надпись Unauthorized . Хотя запрос на /message успешно перенаправляется на гугл-авторизацию. Затем идет запрос на /login и вот тут и все падает. При том, что еще неск. дней назад все работало. С чем может быть проблема?
... чем заменить для Freemarker?
Подскажите, пожалуйста, что почитать для добавления уведомлений которые бы выскакивали даже на других вкладках, как, например у google календаря при приближении события
C webpack не смог скомпилировать. Очень много времени уходит чтобы разобраться с этим. То jar не собирает, то не jar не запускается.
А будет ли Вами рассмотрен postman, чтобы отказаться от фронта на этапе разработки и тестирования ?
Спасибо за видео!
А как подключить изображения в dev и prod версиях?
Столкнулся с проблемой: Cross-Origin Read Blocking (CORB) blocked cross-origin response accounts.google.com/o/oauth2/v2/auth?client_id=...
Может кто-то знает, как решается? Не хочет показывать совсем содержимое main.js файла
А как даже прогуглить эту проблему, нет мыслей
вы решили проблему?
Я не знаю, может это только у меня, но я могу запускать командой "npm start" без ошибок только непосредственно находясь в одной директории с "main.js" (Убунту). И вопрос, так и должно быть или я что-то упустил в настройках?
уфф разобрался наконец. почти две недели убил на настройку и вникание в логику. получается с помощью webpack мы как бы создаем структуру внутри js и потом можем как кирпичики использовать кусочки для построения фронта. и еще вопрос - получается обязательно перед запуском локально проекта сначала предварительно запускать nvm start. без этого никакой js не подгружает?
Ну тип таким образом мы ноду саму подрубаем, а без ноды фронт никак работать не захочет)
@@krab9512то есть в таком случае, смысл спринг приложения только в рест апи состоит? Если вью или реакт запускаются только через нод
Андрей, здравствуйте! Сейчас пересматриваю данный плейлист, и у меня возник достаточно тупой вопрос : можно ли использовать Vue.js для многостраничных приложений?
Можно. :)
Idea не открывает файл .vue на Windows. Можно каким-нибудь блокнотом открыть, но как сделать, чтобы в идее открывать?
Блин, мучаюсь уже второй день. В консоли браузера: Uncaught SyntaxError: Unexpected identifier. И ссылается на 1-ю строчку main.js (import Vue). Как я понял, либо дело в пакетах, либо webpack.config.js. Сталкивался кто?
Забыл отписаться, иногда пара случайно напечатанных символов выходят самой сложной ошибкой которую практически нереально пофиксить =D
@@DarthJaxxFather Можешь подсказать как решил эту проблему? А то я вот бьюсь над точно такой же
Folk-Lore как ты решил проблему с которым мучался 2 дня ? У меня такая же проблема , пожалуйста если знаешь скажи
@@antihype3450 решили проблему?
@@DeathGodN6 решили проблему?
Никак не могу понять, почему моя страница сразу не обновляется при сохранении и обновлении, только если вручную обновить все появляется,
пока накостылял location.reload() но мне кажется это не дело
Вот команда которая может вам временно помочь (kill -9 $(lsof -t -i:8000)) - и тогда повторно надо запустить (npm start)
Вдруг может кому пригодится, если будет похожая ошибка - "ERROR in ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resou
rces/static/js/pages/App.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'components/messages/MessageList' in 'C:\Java\letscode\RESTSarafan\sarafan\src\main
esources\static\js\pages'
@ ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/s
tatic/js/pages/App.vue?vue&type=script&lang=js&) 13:0-59 16:18-30
@ ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js&
@ ./src/main/resources/static/js/pages/App.vue
@ ./src/main/resources/static/js/main.js", тогда внимательно проверяйте название файлов .vue!
Мой пример - в папке \components\messages лежало три файла, два из них назывались MessageRow.vue и MessageForm.vue, а третий назывался MessageList(почему то расширение было скрыто), при этом все три файла и Intellij Idea отображались правильно.
Очень помог комент спасибо.
Все супер и классно! Спасибо за труд.
PS. Понять не могу почему не обновляется список сообщений после добавления/редактирования, а надо перезагружать страницу
Еще раз спасибо
К тому же время жизни моего webpack примерно 5 минут, потом он перестаёт работать и приходится полностью чистить ноды и ставить всё с нуля
Видео хорошее, но требует минимального понимания из области webpack и vuejs
Для тех кто не знает что это прийдется поразбираться.
Очень быстро! :-)
И если не затруднит, чутка хотя бы разжёвывать...
_(просто аудитория тогда станет шире)_
а что именно, требует разжевывания? подключение веб-пака, имхо, раскрыто довольно понятно.
@@noyklgd4403
При чём тут пак?
По логике взаимодействия...
взаимодействия чего с чем?
nOy [KLGD]
Пустой спор и не по адресу...
Тебе всё понятно, тогда зачем тебе это видео?
Я и не спорил с тобой))) Просто пытался тебя понять, что именно непонятно тебе в видосе. Логика взаимодействия чего и с чем? Логика взаимодействия компонентов Vue.js? Логика взаимодействия фронта с бэком? Ты высказал своё мнение, что было бы не плохо "чутка хотя бы разжёвывать...", я задал, вполне нормальный вопрос...
у меня доступ к скрипту в index.html идет если только укажу localhost:8000 / bundle.js. Серверная часть работает на порту 8080, а клиентская на 8000. Как дать доступ к скрипту без указания порта клиентской части и разрешение прописано allowedHosts:[
'localhost:8080']
Будет тестироваться под нагрузкой проект? Сколько человек может одновременно пользоваться?
тестирование под нагрузкой буду рассматривать, но не факт, что на примере этого приложения. Сколько пользователей - зависит от железа и того, какой функционал будет реализован. Но в целом - не стоит заморачиваться с нагрузкой до тех пор, пока приложение не начнёт подавать признаки хоть какой-то нагрузки, т.к. никогда не угадаешь, где в конкретном приложении вылезет bottleneck. Стоит помнить, что преждевременная оптимизация - это антипаттерн
@@letsCodeDru Как я понимаю, человеку (и многим людям тоже) интересно в первую очередь не как оптимизировать проект, а как тестировать под нагрузкой(как происходит этот процесс, какие инструменты используются, какой код пишется и т.д.).
Может у кого тоже не будет нормально работать приложение.В main.js строку new Vuew({ исправил на new Vue({
в голос чет
Я не до конца понимаю, а Свитер это REST приложение? Там ведь тоже есть все виды запросов
Не, свитер - это приложение вообще без JavaScript. Rest это сарафан. Вот такие дурацкие названия)
@@letsCodeDru Разве сарафан это REST? Мне казалось, что в REST не должно быть примесей от MVC, т.к. MVC полностью завязан на бакэнд (который в нашем случае Java). Т.е. в любой момент можно взять и заменить бакэнд на, например, бакэнд, написанный на C#, а фронт этого даже не заметит. Или наоборот, вместо браузера подключить интерфейс, написанный на том же C#
@@МихаилБесфамильный-о6ч Привет! как это сделать? используя Spring Boot + Vue.js
у меня вышла ошибка Cannot find module 'webpack-cli/bin/config-yargs'. Что делать?
Откати все зависимости как у автора, перепиши версии. Удали yarn.lock, и дальше так как я не очень знаком с yarn перезаписал зависимости через npm i, создался package-lock.json, ошибки пропали) Спасибо автору)) Контент супер)
Для чего мне изучать java, если можно заюзать node.js ?
Чтобы получить большую производительность там, где действительно нужна многопоточка
Ни**я не понял, но очень интересно!
если кто-то делает по мануалу, то лучше установите vue-loader версии как у автора, а то есть yarn add -D vue-loader@15.4.1 или если уже установили актуальную версию можете прописать в терминале: yarn upgrade vue-loader@15.4.1 Ну или же просмотреть путь файла plugin.js в папке node_modules/vue-loader и прописать в require.
Надеюсь кому-то поможет
первый вариант вызвал другую ошибку Cannot find module 'webpack/lib/RuleSet'. Второй вариант вызвал ошибку: VueLoaderPlugin is not a constructor, после того как я пошарился и поменял строку const VueLoaderPlugin = require('vue-loader/dist/plugin');
Я фронтендер поэтому все понял))
Если вы настроены решительно, то вот здесь есть обширная инструкция github.com/jonashackt/spring-boot-vuejs . Это все равно не супер просто, но лучше ничего не находилось
Всем привет. не работает npm start ((( куда копать?
Вот лог:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\
odejs\
ode.exe',
1 verbose cli 'C:\\Program Files\
odejs\
ode_modules\
pm\\bin\
pm-cli.js',
1 verbose cli 'start'
1 verbose cli ]
2 info using npm@6.14.6
3 info using node@v12.18.3
4 verbose stack Error: missing script: start
4 verbose stack at run (C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm\lib
un-script.js:155:19)
4 verbose stack at C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm\lib
un-script.js:63:5
4 verbose stack at C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm
ode_modules
ead-package-json
ead-json.js:116:5
4 verbose stack at C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm
ode_modules
ead-package-json
ead-json.js:436:5
4 verbose stack at checkBinReferences_ (C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm
ode_modules
ead-package-json
ead-json.js:391:45)
4 verbose stack at final (C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm
ode_modules
ead-package-json
ead-json.js:434:3)
4 verbose stack at then (C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm
ode_modules
ead-package-json
ead-json.js:161:5)
4 verbose stack at ReadFileContext. (C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm
ode_modules
ead-package-json
ead-json.js:350:20)
4 verbose stack at ReadFileContext.callback (C:\Users\Kot\AppData\Roaming
vm\v12.18.3
ode_modules
pm
ode_modules\graceful-fs\graceful-fs.js:123:16)
4 verbose stack at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:261:13)
5 verbose cwd D:\Dev\sarafan
6 verbose Windows_NT 10.0.19041
7 verbose argv "C:\\Program Files\
odejs\
ode.exe" "C:\\Program Files\
odejs\
ode_modules\
pm\\bin\
pm-cli.js" "start"
8 verbose node v12.18.3
9 verbose npm v6.14.6
10 error missing script: start
11 verbose exit [ 1, true ]
заменил в package.json зависимости на версии автора и заработало...
Андрей, еще раз здравствуйте!
Все сделал по уроку, но вылетает подобная фишка. Не подскажете, може ли это быть связано с версиями используемого ПО в зависимостях? Спасибо
Access to script at 'accounts.google.com/o/oauth2/v2/auth?client_id=975346796694-25nlfsl8a41jhib6hv7id1s2gdqqd8e5.apps.googleusercontent.com&redirect_uri=localhost:8080/login&response_type=code&scope=openid%20email%20profile&state=t5Rf1D' (redirected from 'localhost:8080/js/main.js') from origin 'localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
accounts.google.com/o/oauth2/v2/auth?client_id=975346796694-25nlfsl8a41jhib6hv7id1s2gdqqd8e5.apps.googleusercontent.com&redirect_uri=localhost:8080/login&response_type=code&scope=openid%20email%20profile&state=t5Rf1D:1 Failed to load resource: net::ERR_FAILED
у меня была похожая проблема, я не ввел npm start в терминале и долго искал почему Failed to load resource
@@alexsays1746 спасибо большое, разобрался уже) отдельно crossorigin прописал и заработало
@@webmasterair можно подробнее?
Попробуй в следующий раз подключить maven-frontend-plugin spring.io/guides/tutorials/react-and-spring-data-rest/
Ну как и в конце видео)) Фууууууххххххх))) Все работает пока что)
Нууууууууу, ребята, это твердый дизлайк. На лету мимоходом говорится про целый пласт сложнейших вещей, которые совершенно не относятся к Java и Spring Boot. Вы меня простите, но если уже делать курс на такой базе, нужно как то включать подачу тех знаний и логики, которые относятся ко всем упомянутым технологиям. Это не просто html, css, js, эти техники по значительности требуют не менее пристального изучения, чем Spring, а по объему - даже БОЛЬШЕГО. Смысла не понимаю так давать материал. С другой стороны, если кто уже владеет этими технологиями в совершенстве - неужели его устроит подача Спринга на таком уровне?! А кто не владеет - пойдет их изучать и вернется сюда через год, забыв уже все на свете. Конечно, можно откатиться на ранние версии и тупо повторить все за автором, но это не обучение, а ..... И все для того чтобы красоту навести? Зачем? Лучше закончить со спрингом, путь итог будет деревянным, но понятным и разобранным до основания. Путь мы бы видели на странице json ы сплошные. И отдельно разбирать уже украшения. Или отдельно пилить подробные видео про все упомянутые технологии и рекомендовать изучать их ДО данного курса сразу же, в описании. А тут все по верхам, я считаю. Никакого глубокого понимания. Все обо всем и ни о чем. Жаль. Придется уходить наверное, не нравится мне, как попугаю просто тупо копировать и вставлять.
если вы все уже установили надо обновить все зависимости и поставить версии как у автора. Версии можно посмотреть в package.json НП: yarn upgrade vue-loader@15.4.1
Спасибо! Отличный и лаконичный материал!
Спасибо! Отличный и лаконичный материал!
Спасибо! Отличный и лаконичный материал!
Спасибо! Отличный и лаконичный материал!