Конструктор сайтов на Vue.js

🇷🇺 by Mikhail Shpakov

Тестовое задание для компании Timeweb.
Приложение реализовано с помощью Vue.js и представляет собой простейший конструктор сайтов, демонстрируя также концепции SPA и PWA приложения.

🎉 Демо

📐 Общие принципы работы приложения

🔨 Список использованных технологий и инструментов

🔧 Локальный запуск проекта

🚀 Деплой на Github Pages

Общие принципы работы приложения

В приложении используется Vuex в качестве централизованного хранилища данных для всех компонентов. Для обеспечения персистентности данных в рамках одного браузера используется localStorage. Данные, находящиеся во Vuex, автоматически сохраняются в localStorage с помощью плагина vuex-persistedstate.

В приложение доступно как создание новых сайтов, так и их сохранение в историю с возможностью просмотра и редактирования ранее созданных сайтов. Максимально возможное количество сохранённых сайтов ограниченно только размером localStorage.

Архитектурно каждый прототип создаваемого сайта представляет собой объект, содержащий набор полей с мета информацией (id, название сайта, время создания и т.д.), объект с текущими настройками конструктора и массив со списком использованных блоков. Использование массива для хранения информации о блоках, позволяет гарантировать при сохранении порядок их следования (order).

Каждый блок в свою очередь, также представляет собой объект с мета информацией и вложенным массивом со списком атрибутов (список будет отличаться для различных блоков), который необходим для рендеринга компонента. Использование списка атрибутов позволяет унифицировать создание блоков, вынося всю уникальную логику в отдельные компоненты-блоки.

Подобная иерархическая структура позволяет гибко масштабировать приложение, легко добавлять новые сущности (например, пользователь, домен и т.д.) и хорошо подходит для использования в средних и больших командах, так как позволяет разделить зоны ответственности разных разработчиков.

Инлайн редактирование текста в блоках выполнено без использования библиотек на нативном Vue. Для отображения на странице и возможности персистентного хранения все изображения кодируются в Base64.

Для реализации Drag-and-drop используется библиотека Vue.Draggable, которая позволяет гибко управлять поведением блоков на странице, в том числе предоставляю возможность создавать сложные вложенные структуры (в этом приложение вложенные структуры не реализованы).

Для возможности изменения положения блока с управляющими элементами на странице конструктора использована библиотека VueDraggableResizable 2. Данную библиотеку потенциально возможно использовать совместно с Vue.Draggable для реализации сложных сценариев управления пользовательскими блоками.

Для ускорения процесса разработки использован HTML-шаблонизатор Pug, CSS препроцессор Sass и набор компонентов UI Buefy.

Работа приложения протестирована в браузерах Google Chrome (Blink), Mozilla Firefox (Gecko), Microsoft Edge (EdgeHTML) и Apple Safari (WebKit).

⚠️ Приложение не поддерживает работу в Internet Explorer. ⚠️

Список использованных технологий и инструментов

• Vue
• Vue Router
• Vuex + vuex-map-fields + vuex-persistedstate + secure-ls
• Pug
• Sass
• Buefy
• Vue.Draggable
• VueDraggableResizable 2
• vue-moment
• Vue-cli (Webpack, Babel, Postcss)
• Jest + vue-test-utils
• Eslint (standard style)
• Иконки mdi
• Графика Undraw
• Github Pages
• Travis CI

Локальный запуск проекта

1. Загрузка проекта на локальную машину

   git clone https://github.com/mikhail-shpakov/website-builder-vuejs.git
   

2. Установка зависимостей

   npm ci
   

   Использование npm ci вместо npm i позволит гарантировать корректные версии устанавливаемых npm пакетов, так как они будут взяты из package-lock.json.

3. Запуск сервера для разработки

   В качестве сервера для разработки используется Webpack Dev Server.

   Для его запуска выполните из корневой директории проекта:

   npm run serve
   

   После этого приложение будет доступно по адресу localhost:8080.

   Во время разработки изменения в файлах будут отслеживаться автоматически, при этом будет вызываться линтер и сервер будет перезапускаться.

   Также доступны следующие команды:

   npm run build // сборка приложения Vue для развёртывания на production
   npm run lint // ручной запуск линтера
   

Деплой на Github Pages

Для публикации приложения на Github Pages с помощью Travis CI, требуется:

1. Зарегистрировать аккаунт на Travis CI и добавить в него проект Github.
2. Получить персональный токен доступ на Github (инструкция) и добавить в Travis переменную окружения $GITHUB_TOKEN.
3. Создать в корне проекта файл с описанием опций публикации с названием .travis.yml. Описание опций можно найти здесь.
4. Для корректного роутинга SPA на Github Pages требуется выполнить инструкции из репозитория.

После этого, при каждом коммите в отслеживаемую ветку (указывается в .travis.yml) при условии успешного прохождения CI (эта стадия может отсутствовать, как, например, в этом проекте) проект будет автоматически опубликован на Github Pages и по умолчанию будет доступен по адресу http(s)://<user>.github.io/<repository>.