Webdevkin. Статьи с меткой "Vue.js"

Админка магазина на vue.js. Урок 6. Vue-cli и vue-компоненты

февраль 26 , 2019

До этого урока мы писали код просто и сурово. Здоровенный index.html, внешние библиотеки с CDN-a, javascript-код в одном файле. Для учебного проекта сгодится, но мы же хотим быть серьезными ребятами.

Так мы приходим к пониманию, что пора делать окружение для локальной разработки, бить код на отдельные файлы-модули и настраивать сборку. Здесь у нас есть выбор. Первое: взять вебпак или другой сборщик и врукопашную настроить все, что нужно. Второе: взять готовый инструмент, который всю эту рутину сделает за нас.

Я выбираю второй вариант. Грамотные люди уже написали все сборщики и подготовили основу проектов vue, на которой мы и будем развивать наше приложение.

Метки:
Читать дальше

Админка магазина на vue.js. Урок 5. Разбиваем приложение на компоненты

февраль 14 , 2019

Приложение vue строится на компонентах. Сейчас у нас только один компонент ProductItem, а вся логика содержится в корневом экземпляре vue. Это нехорошо, нам уже сейчас непросто в нем ориентироваться, а при наращивании функционала будет еще сложнее.

В этом уроке мы разобьем приложение на несколько компонентов поменьше. Также добавим две новые страницы и узнаем, как переключаться между ними.

Метки:
Читать дальше

Админка магазина на vue.js. Урок 4. Правим код под новое REST API и расследуем багу

февраль 7 , 2019

Продолжаем работать над админкой vue. Перед тем, как разбивать наше приложение на компоненты, решил написать один промежуточный урок. В нем мы сделаем две вещи.

Во-первых, перейдем на новое серверное rest api, которое мы реализовали в третьем уроке.

Во-вторых, разберем багу, которая закралась в наш код. Бага интересна тем, что ее не заметили ни я, ни читатели. Нашел случайно, когда работал над третьим уроком с новым rest api.

Но обо всем по порядку.

Метки:
Читать дальше

Админка магазина на vue.js. Урок 2. Фильтры и сортировки

декабрь 20 , 2018

В первом уроке админки на vue мы вывели на страницу товары и реализовали поиск. Сегодня прикрутим к списку товаров несколько фильтров и сортировок. Это будут фильтры по категориям, брендам, ценам и сортировки по рейтингу и ценам. Главная цель статьи - показать, что на vue делать такие вещи быстро и удобно.

Метки:
Читать дальше

Админка магазина на vue.js. Урок 1. Список товаров

декабрь 16 , 2018

С админкой на файлах мы закончили, пора переходить к вещам посерьезнее. На очереди админка для интернет-магазина, уже на базах данных, все как положено. За магазином далеко ходить не нужно, возьмем наш shop.webdevkin.ru. Будет здорово, если Вы с ним уже знакомы. Если нет, то посмотрите статью Структура базы данных в интернет-магазине, для админки этого хватит. К тому же по ходу уроков я буду стараться пояснять неочевидные моменты и давать ссылки на нужные места магазина. Постараемся не заблудиться :-)

В админке на файлах мы сделали минимальный набор функций: список редактируемых параметров и все. Но интернет-магазин дело посложнее. Мы хотим уметь работать с товарами, категориями, ценами и брендами. Поэтому одной статьей не обойдемся, будет серия уроков. Уроки небольшие, чтобы освоить материал за один раз и при этом не скучать.

Метки:
Читать дальше