Простой способ начать работу с простейшей библиотекой Javascript для новичков и простейшей базой данных реального времени «firebase».

Введение в Vue.js

Vue — это прогрессивный фреймворк JavaScript, ориентированный на создание пользовательских интерфейсов. Поскольку он работает только на «уровне представления», он не предполагает промежуточного программного обеспечения и серверной части и поэтому может быть легко интегрирован в другие проекты и библиотеки. Vue.js предлагает множество функций для уровня представления и может использоваться для создания мощных одностраничных веб-приложений. Ниже вы можете найти список функций:

  • Реактивные интерфейсы
  • Декларативная визуализация
  • Привязка данных
  • Директивы
  • Логика шаблона
  • Компоненты
  • Обработка событий
  • Вычисленные свойства
  • CSS-переходы и анимация
  • Фильтры

Размер основной библиотеки составляет всего 17 КБ, что означает, что вы можете просто добавить ее на свою html-страницу с тегом ‹script› и начать работу.

Веб-сайт Vue.js доступен по адресу: https://vuejs.org/, чтобы погрузиться в него.

Введение в Firebase

Firebase — это мобильная платформа от Google, предлагающая ряд различных функций, которые вы можете выбирать и комбинировать. В частности, эти функции вращаются вокруг облачных сервисов, позволяя пользователям сохранять и извлекать данные для доступа с любого устройства или браузера. Это может быть полезно для таких вещей, как облачный обмен сообщениями, хостинг, отчеты о сбоях, уведомления, аналитика и даже заработок через AdMob. Здесь мы собираемся использовать функцию базы данных в реальном времени.

Короче говоря, Firebase обрабатывает внутренний онлайн-элемент для ваших приложений, позволяя вам сосредоточиться на внешнем пользовательском интерфейсе и функциональности. Все это делается с помощью единого SDK с простыми в использовании API и отличной интеграцией в Android Studio. Это избавляет от необходимости создавать собственный сценарий на стороне сервера с использованием PHP и MySQL или аналогичных настроек. Это «Бэкенд как услуга» или «BaaS», и, по сути, это означает, что любой действительно может создать это амбициозное социальное приложение. Он работает с приложениями для Android, приложениями для iOS и веб-приложениями, и, что самое приятное, он бесплатный!

Настроить проект firebase просто
https://console.firebase.google.com/

Настройка: Vue.js

Есть разные способы включить Vue.js в ваш веб-проект:

  • Используйте CDN, включив тег ‹script› в файл HTML
  • Установить с помощью Node Package Manager (NPM)
  • Установить с помощью Бауэра
  • Используйте Vue-cli для настройки вашего проекта

Далее мы перейдем к Vue-cli, чтобы настроить новый проект и установить библиотеку Vue.js 2.

Использование Vue-кли

Во-первых, нам нужно установить Vue-cli. Интерфейс командной строки доступен в виде пакета NPM. Убедитесь, что Node.js и команда npm доступны в вашей системе, и используйте следующую команду для глобальной установки Vue CLI в вашей локальной системе:

$ npm install -g vue-cli

После успешной установки клиента становится доступной команда vue. Теперь мы можем инициировать проект с помощью этой команды следующим образом:

$ vue init webpack firevue-todo

теперь ваш проект шаблона vuejs будет загружен, а структура папки проекта выглядит следующим образом:

Структура проекта

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

чтобы узнать подробнее нажмите ниже



Структура проекта · GitBook
├── build/ │ └── ... ├── config/ │ ├── index.js │ └── ... ├── src/ │ ├── main.js │ ├── App.vue │ ├── компоненты/ │ │ └…vuejs-templates.github.io



Настройка Firebase:

продолжение в следующем посте….