basil-gor/vue-test

Тестовое задание от компании MyPlayCity.

vue-test

Тестовое задание от компании MyPlayCity

1. Использовать для задания фреймворк vue.js https://vuejs.org/v2/guide/.

2. Сверстать index.html, из мини-макета представленного на картинке.

3. Верстка должна тянуться на весь экран, левая темная панель - зафиксирована.

4. Для верстки использовать sass или less, сборку осуществлять gulp.

5. Оживить приложение, сделав следующий функционал через vue.js (используя components):

   • В левом синем блоке сделать список разделов с кнопкой "добавить", при нажатии на которую добавляется раздел.

   • При нажатии на один из разделов в левом блоке, центральный блок отображает список сообщений, которые были набраны в этом разделе.

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

   • Итого - мы можем выбирать в левом блоке разделы, и в центральном блоке наполнять их набранными сообщениями.

   • Никакого серверного кода не нужно, страница содержит сообщения в памяти, и при заходе должна прочитать данные о предыдущих сообщениях из localStore браузера. И отобразить их.

   • Оформить в виде vue.js components пункты меню из левого блока и набранные сообщения из центрального блока

   • Оформить функционал левого и центрального блока как 2 отдельных инстанса vue.js (https://vuejs.org/v2/guide/instance.html)

6. Полученный проект запаковать в zip архив и прислать нам"

Запуск проекта

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint