Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

Технологии:

• Фрейморк: Nuxt.js
  • SPA
  • PWA
    • Web workers
  • webpack
  • eslint
• Библиотека Mathjs

Архитектура:

Компоненты

Дисплей.

Display.vue

Представляет из себя поле для ввода математических выражений.

Превью.

Блок для отображения результата вычислений в реальном времени.

Панель с инструментами.

InstrumentsPanel.vue

Включает в себя:

• кнопку для переключения между "Журналом" и "Клавиатурой"
• кнопку для переключения между режимами "Простой" и "Инженерный"
• кнопку для удаления последнего символа.

Панель с кнопками для управления "памятью"

MemoryPanel.vue

• MC - memory clear - Очищение памяти
• MS - memory save - Сохранение значения в память
• M+ - Добавление значения в память
• M- - Вычитание значения из память
• MR - memory recall - Добавляет значение из памяти к текущему выражению

Блок с кнопками для ввода чисел и знаков.

Вводимые значения разделены по функционалу:

• числа (включая точки для чисел с плавающей точкой)
• константы
• операторы
• функции
• скобки

Журнал. Для отображения истории вычислений.

History.vue

Включает в себя:

• Список вычислений
• Кнопку для очистки журнала

Хранилище Vuex store

Хранилище разделено на модули

• calculator
• memory
• history

Стили

В качестве препроцессора используется Sass. Для расположения кнопок калькулятора используется технология Css Grid. Цвета взяты из цветовой палитры material design

Иконки

Для добавления svg иконок используется модуль @nuxtjs/svg-sprite. Все иконки добавляются в папку assets/sprite/svg из которой автоматически генерируется спрайт. Для использования иконки необходимо вставить глобально зарегестрированный компонент svg-icon и передать, в качестве входного параметра name название файла иконки

Файловая структура

Файловая структура типичная для приложений Nuxt. Состоит из папок

• pages - Папка в которой размещаются основные страницы сайта. По названию папки страницы формируется route. В данном случае страница только одна

• assets. Папка содержит нескомпилированные файлы с исходным кодом. Для данного проекта это файлы scss и svg

• components. Папка для компонентов. Разделена на подпапки

  • Calculator - основной компонент
  • common - для общих компонентов
  • ui - для компонента user interface

• layouts. Содержит шаблоны приложения

• static. Папка содержит статические файлы

• store. Содержит файлы модулей хранилища Vuex

• test. Содержит файлы с юнит тестами

Деплой

# deploy on heroku

$ git push heroku master