README.md

Оригинальная статья находится на сайте https://practical-web.ru/lessons-vue

ARTICLE.html

<h1 id="серия-видео-где-будем-делать-книгу-контактов-на-vue-3-options-api---vue-router--pinia-store--localstorage-пока-без-backend">Серия видео где будем делать &quot;Книгу контактов&quot; на Vue 3 (options api)  + Vue Router + Pinia Store + localStorage (пока без backend)</h1>
<h2 id="0-превью-проекта-книга-контактов-на-vue-3-options-api---vue-router--pinia-store--localstorage">0 Превью проекта &quot;Книга Контактов&quot; на Vue 3 options api  + Vue Router + Pinia Store + localStorage</h2>
<p>[[insertYoutube?code=BqsbxSFxBf0]]</p>
<h2 id="1-подготовка-vue-scss-шрифта-заготовка-header-обёртки">1 Подготовка Vue, scss, шрифта, заготовка header обёртки</h2>
<p>[[insertYoutube?code=ghRJtAdhlSQ]]</p>
<h2 id="2-продолжение-шапки-главной-страницы-и-адаптация">2 Продолжение шапки главной страницы и адаптация</h2>
<p>[[insertYoutube?code=F2JC9Ut5nOg]]</p>
<h2 id="3-создание-компонента-фильтрации-пока-визуальное--хранение-в-store-pinia">3 Создание компонента фильтрации, пока визуальное + хранение в store Pinia</h2>
<p>[[insertYoutube?code=ZfwYSnjVFLE]]</p>
<h2 id="4-делаем-кнопку-добавить-контакт-и-подредактировал-логику-кнопки-фильтра">4 Делаем кнопку добавить контакт и подредактировал логику кнопки фильтра</h2>
<p>[[insertYoutube?code=RdnG4RAWmoY]]</p>
<h2 id="5-адаптация-фильтра-контейнера-и-кнопки-добавить-контакт">5 Адаптация фильтра, контейнера и кнопки добавить контакт</h2>
<p>[[insertYoutube?code=YZr95VCv9Gs]]</p>
<h2 id="6-адаптация-заголовков-списка-контактов">6 Адаптация заголовков списка контактов</h2>
<p>[[insertYoutube?code=gmCCcHbdd_g]]</p>
<h2 id="7-адаптив-списка-контактов-и-упорядочивание-списка-контактов-по-дате-добавления--store-contacts">7 Адаптив списка контактов и упорядочивание списка контактов по дате добавления + store contacts</h2>
<p>[[insertYoutube?code=6fvCQuA83_4]]</p>
<h2 id="8-начинаем-страницу-контакта-и-cоздание-компонента-аватарки">8 Начинаем страницу контакта и cоздание компонента аватарки</h2>
<p>[[insertYoutube?code=KVP3pwNvzKk]]</p>
<h2 id="9-продолжаем-визуал-шапки-контакта-и-её-адаптацию">9 Продолжаем визуал шапки контакта и её адаптацию</h2>
<p>[[insertYoutube?code=bO44cR1UqeA]]</p>
<h2 id="10-делаем-вёрстку-компонента-карточки-контакта">10 Делаем вёрстку компонента карточки контакта</h2>
<p>[[insertYoutube?code=lwjBVU0B-DA]]</p>
<h2 id="11-проработку-вёрстки-интерфейса-контакта-создание-компонента-contactinput">11 Проработку вёрстки интерфейса контакта, создание компонента ContactInput</h2>
<p>[[insertYoutube?code=_yufDUcFe7o]]</p>
<h2 id="12-адаптация-карточки-контакта-к-разрешениям-576-768">12 Адаптация карточки контакта к разрешениям 576 768</h2>
<p>[[insertYoutube?code=lvGJVKGQxCU]]</p>
<h2 id="13-адаптация-карточки-контакта-в-разрешениях-768-1920">13 Адаптация карточки контакта в разрешениях 768 1920</h2>
<p>[[insertYoutube?code=iuJBKYSAKzw]]</p>
<h2 id="14-подключение-перехода-из-контактов-в-карточку-контакта-подвязка-данных-из-pinia-стора-к-текущей">14 Подключение перехода из контактов в карточку контакта, подвязка данных из Pinia стора к текущей</h2>
<p>[[insertYoutube?code=9cll2AgcPsk]]</p>
<h2 id="15-связка-сохранения-в-контакте-имени-в-сторе--валидация--запись-контактов-в-localstorage---запись">15 Связка сохранения в контакте имени в сторе + валидация + запись контактов в localstorage   запись</h2>
<p>[[insertYoutube?code=nvMXmM4OnV4]]</p>
<h2 id="15-часть-№2---объяснение-того-что-делал-крайний-час-когда-запись-пропала">15 Часть №2   объяснение того что делал крайний час когда запись пропала</h2>
<p>[[insertYoutube?code=dVWIeQjfQ2U]]</p>
<h2 id="16-сообщение-об-успешном-сохранении-с-адаптациями">16 Сообщение об успешном сохранении с адаптациями</h2>
<p>[[insertYoutube?code=q_hlk14U730]]</p>
<h2 id="17-чуть-изменение-размеров-нотификации-на-пк-разрешении-создание-вёрстки-состояний-кнопки-сохранить">17 Чуть изменение размеров нотификации на пк разрешении, создание вёрстки состояний кнопки сохранить</h2>
<p>[[insertYoutube?code=wDL0XCfCzI4]]</p>
<h2 id="18-подключение-фильтра-на-ввод-имени-чтобы-нельзя-было-вводить-цифры-и-правка-валидации">18 Подключение фильтра на ввод имени чтобы нельзя было вводить цифры и правка валидации</h2>
<p>[[insertYoutube?code=FCG_7FgJSjE]]</p>
<h2 id="19-создание-валидации-телефона--маска-ввода-телефона--сохранение-телефона-в-store-pinia-и-localsto">19 Создание валидации телефона + маска ввода телефона + сохранение телефона в store Pinia и localSto</h2>
<p>[[insertYoutube?code=1BCK78_IH2Y]]</p>
<h2 id="191-итого-проговорил-что-сделано-для-cоздание-валидации-телефона--маска-ввода-телефона--сохранен">19.1 Итого проговорил что сделано для: cоздание валидации телефона + маска ввода телефона + сохранен</h2>
<p>[[insertYoutube?code=oAYMMr9SckM]]</p>
<h2 id="20-валидация-email-через-regexp-отображение-ошибки-невалидного-эмейл-и-сохранение-email-в-store-pin">20 Валидация email через regexp, отображение ошибки невалидного эмейл и сохранение email в store Pin</h2>
<p>[[insertYoutube?code=vt5DGFqFqFk]]</p>
<h2 id="21-сохранение-пункта-типа-контакта-в-store-pinia">21 Сохранение пункта типа контакта в store Pinia</h2>
<p>[[insertYoutube?code=Tm53ziP7uBk]]</p>
<h2 id="22-делаем-удаление-контакта-с-подтверждением-записью-в-store-pinia-и-localstorage">22 Делаем удаление контакта с подтверждением, записью в store Pinia и localStorage</h2>
<p>[[insertYoutube?code=I6f3R7HDtfs]]</p>
<h2 id="23-делаем-сообщение-об-удалении-конакта-после-редиректа-на-страницу-контактов">23 Делаем сообщение об удалении конакта после редиректа на страницу контактов</h2>
<p>[[insertYoutube?code=f3sNROSlwIw]]</p>
<h2 id="24-правка-стилей-отступа-кнопки-добавить-контакт-и-размер-шрифта-в-фильтре">24 Правка стилей отступа кнопки &quot;добавить контакт&quot; и размер шрифта в фильтре</h2>
<p>[[insertYoutube?code=e4DRXbDBBf8]]</p>
<h2 id="25-создание-роута-для-карточки-добавления-контакта-вывод-добавления-карточки-контакта-по-новому-роуту">25 Создание роута для карточки добавления контакта, вывод добавления карточки контакта по новому роуту</h2>
<p>[[insertYoutube?code=vI5KWJdmafI]]</p>
<h2 id="26-делаем-невыбранный-тип-контакта-серым-цветом-вывод-заголовка-в-шапку-и-в-карточку-замена-значка">26 Делаем невыбранный тип контакта серым цветом, вывод заголовка в шапку и в карточку, замена значка</h2>
<p>[[insertYoutube?code=3gUNyk4kG34]]</p>
<h2 id="27-валидация-всех-полей-при-сохранении-контакта-сохранение-контакта-в-store-pinia-и-localstorage-сброс-всех-полей-после-сохранения-контакта">27 Валидация всех полей при сохранении контакта, сохранение контакта в store Pinia и localStorage, сброс всех полей после сохранения контакта</h2>
<p>[[insertYoutube?code=CyBcYxQ4zz8]]</p>
<h2 id="28-правка-логики-сохранения-существующего-контакта-и-нового-правки-сброса-инпутов-при-сохранении">28 Правка логики сохранения существующего контакта и нового, правки сброса инпутов при сохранении</h2>
<p>[[insertYoutube?code=yWzE6R3ha3g]]</p>
<h2 id="29-подключение-кнопки-добавить-контакт-рефакторинг-данных-в-store-pinia-чтобы-данные-не-дублировали">29 Подключение кнопки добавить контакт, рефакторинг данных в store Pinia чтобы данные не дублировали</h2>
<p>[[insertYoutube?code=SRXWTjs_DGk]]</p>
<h2 id="30-делаем-фильтрацию-контактов-по-типу-контактов-некторые-тексты-ошибок-приводим-в-согласие-с-тз">30 Делаем фильтрацию контактов по типу контактов, некторые тексты ошибок приводим в согласие с тз</h2>
<p>[[insertYoutube?code=72L19k7rURE]]</p>
<h2 id="код-уроков-находится-на-github">Код уроков находится на GitHub</h2>
<p><a target="_blank" href="https://github.com/artemsites/contacts-book" title="Открыть в новой вкладке">https://github.com/artemsites/contacts-book</a>   </p>
<h2 id="живой-пример-итогового-приложения-можно-посмотреть-здесь">Живой пример итогового приложения можно посмотреть здесь</h2>
<p><a target="_blank" href="https://practical-web.ru/demo/lessons/vue/contacts-book/" title="Открыть в новой вкладке">https://practical-web.ru/demo/lessons/vue/contacts-book/</a>   </p>

ARTICLE.md

Серия видео где будем делать "Книгу контактов" на Vue 3 (options api) + Vue Router + Pinia Store + localStorage (пока без backend)

0 Превью проекта "Книга Контактов" на Vue 3 options api + Vue Router + Pinia Store + localStorage

[[youtube id="BqsbxSFxBf0"]]

1 Подготовка Vue, scss, шрифта, заготовка header обёртки

[[youtube id="ghRJtAdhlSQ"]]

2 Продолжение шапки главной страницы и адаптация

[[youtube id="F2JC9Ut5nOg"]]

3 Создание компонента фильтрации, пока визуальное + хранение в store Pinia

[[youtube id="ZfwYSnjVFLE"]]

4 Делаем кнопку добавить контакт и подредактировал логику кнопки фильтра

[[youtube id="RdnG4RAWmoY"]]

5 Адаптация фильтра, контейнера и кнопки добавить контакт

[[youtube id="YZr95VCv9Gs"]]

6 Адаптация заголовков списка контактов

[[youtube id="gmCCcHbdd_g"]]

7 Адаптив списка контактов и упорядочивание списка контактов по дате добавления + store contacts

[[youtube id="6fvCQuA83_4"]]

8 Начинаем страницу контакта и cоздание компонента аватарки

[[youtube id="KVP3pwNvzKk"]]

9 Продолжаем визуал шапки контакта и её адаптацию

[[youtube id="bO44cR1UqeA"]]

10 Делаем вёрстку компонента карточки контакта

[[youtube id="lwjBVU0B-DA"]]

11 Проработку вёрстки интерфейса контакта, создание компонента ContactInput

[[youtube id="_yufDUcFe7o"]]

12 Адаптация карточки контакта к разрешениям 576 768

[[youtube id="lvGJVKGQxCU"]]

13 Адаптация карточки контакта в разрешениях 768 1920

[[youtube id="iuJBKYSAKzw"]]

14 Подключение перехода из контактов в карточку контакта, подвязка данных из Pinia стора к текущей

[[youtube id="9cll2AgcPsk"]]

15 Связка сохранения в контакте имени в сторе + валидация + запись контактов в localstorage запись

[[youtube id="nvMXmM4OnV4"]]

15 Часть №2 объяснение того что делал крайний час когда запись пропала

[[youtube id="dVWIeQjfQ2U"]]

16 Сообщение об успешном сохранении с адаптациями

[[youtube id="q_hlk14U730"]]

17 Чуть изменение размеров нотификации на пк разрешении, создание вёрстки состояний кнопки сохранить

[[youtube id="wDL0XCfCzI4"]]

18 Подключение фильтра на ввод имени чтобы нельзя было вводить цифры и правка валидации

[[youtube id="FCG_7FgJSjE"]]

19 Создание валидации телефона + маска ввода телефона + сохранение телефона в store Pinia и localSto

[[youtube id="1BCK78_IH2Y"]]

19.1 Итого проговорил что сделано для: cоздание валидации телефона + маска ввода телефона + сохранен

[[youtube id="oAYMMr9SckM"]]

20 Валидация email через regexp, отображение ошибки невалидного эмейл и сохранение email в store Pin

[[youtube id="vt5DGFqFqFk"]]

21 Сохранение пункта типа контакта в store Pinia

[[youtube id="Tm53ziP7uBk"]]

22 Делаем удаление контакта с подтверждением, записью в store Pinia и localStorage

[[youtube id="I6f3R7HDtfs"]]

23 Делаем сообщение об удалении конакта после редиректа на страницу контактов

[[youtube id="f3sNROSlwIw"]]

24 Правка стилей отступа кнопки "добавить контакт" и размер шрифта в фильтре

[[youtube id="e4DRXbDBBf8"]]

25 Создание роута для карточки добавления контакта, вывод добавления карточки контакта по новому роуту

[[youtube id="vI5KWJdmafI"]]

26 Делаем невыбранный тип контакта серым цветом, вывод заголовка в шапку и в карточку, замена значка

[[youtube id="3gUNyk4kG34"]]

27 Валидация всех полей при сохранении контакта, сохранение контакта в store Pinia и localStorage, сброс всех полей после сохранения контакта

[[youtube id="CyBcYxQ4zz8"]]

28 Правка логики сохранения существующего контакта и нового, правки сброса инпутов при сохранении

[[youtube id="yWzE6R3ha3g"]]

29 Подключение кнопки добавить контакт, рефакторинг данных в store Pinia чтобы данные не дублировали

[[youtube id="SRXWTjs_DGk"]]

30 Делаем фильтрацию контактов по типу контактов, некторые тексты ошибок приводим в согласие с тз

[[youtube id="72L19k7rURE"]]

Код уроков находится на GitHub

https://github.com/artemsites/contacts-book

Живой пример итогового приложения можно посмотреть здесь

https://practical-web.ru/demo/lessons/vue/contacts-book/