Приложение Vue.js для чата в реальном времени + автоматическое развертывание netlify

Vue.js
Приложение Vue.js для чата в реальном времени + автоматическое развертывание netlify

Введение

за проектом следятsitepointРазработано приложение Vue.js для чата в реальном времени, ядроchatkit, используйте netlify для автоматического развертывания.Исходный кодvuechat, Доступны наpigchatопыт, тест аккаунта, test2

стек технологий

  • Vue
  • Vuex
  • Vue Router
  • Pusher ChatKit
  • SCSS
  • ElementUI

chatkit

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

vue

Vue создается с помощью vue-cli3.0, если он не обновлен

npm install -g @vue/cli
//创建
vue create vue-chatkit
//或者使用可视化界面创建
vue ui

я всегда выбираю эти

Конечно, вы можете выбрать, как вам нравится

vuexLocal

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

ElementUI

Оригинальное бо использовало bootstrap-vue, я использовал element

//安装
yarn add element-ui / npm i element-ui
//导入 main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

предварительный просмотр

Вообще говоря, есть только две страницы.Компьютер будет чувствовать себя пустым, но мобильный телефон будет в порядке.Если вам нужно расширить, вы можете расширить в соответствии с вашими потребностями.

Ход проекта

Иди первымchatkitЗарегистрируйтесь на официальном сайте и создайте чат после успеха

Затем выберите экземпляр, который вы только что создали, и создайте пользователей и комнаты.
Обратите внимание на User Identifier здесь, который требуется при входе в систему. Далее идет никнейм

Тогда ключ INSTANCE_LOCATOR и TOKEN_URL

URL-адрес должен щелкнуть здесь, а затем скопировать всю ссылку, отображаемую под ней.

Предыдущая конфигурация была завершена здесь, и, наконец, написан код.

Дополнительное развертывание NetLify

Перейти непосредственно кnetlifyВойдите с помощью github, затем выберите проект, который хотите развернуть.

изменить имя Вы можете увидеть изменение имени сайта в настройках сайта
Преимущество развертывания netlify заключается в том, что вам не нужно упаковывать его самостоятельно, и оно будет автоматически обновлять развертывание для вас каждый раз, когда вы обновляете свой код до git.

наконец

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

Категории