Здравствуйте, в этой статье мы сначала рассмотрим Svelte и Tailwind CSS.

В начале разработки моего проекта выходного дня я начал с React и заметил, что мне очень скучно использовать управление состоянием, и начал искать новое путешествие. Тогда мне на ум пришел Svelte, и я начал с Svelte Tutorial. Спустя два часа я начал с самого начала свой проект со Svelte. В Svelte разработка и результаты происходят очень быстро.

Я начал думать, что если я начну изучать новую технологию, то почему бы не быть более радикальным? И таким образом начните изучать TailwindCSS.

TL;DR



GitHub — muhammedikinci/svelte-tailwind-socketio-medium: проект Svelte для статьи на Medium
Psst — ищете более полное решение? Попробуйте SvelteKit, официальную платформу для создания веб-приложений…github.com



Стройный

Svelte не работает традиционными методами, как другие фреймворки (React и Vue). Здесь нет виртуального DOM, и, следовательно, у многих есть сверхбыстрое время сборки и время выполнения.

Попутный ветер CSS

Tailwind CSS — это очень быстрый CSS-фреймворк, если вы разрабатываете приложение. У Tailwind есть хорошо документированный и не сложный сайт.

🚦Начать

Нам нужно клонировать проект шаблона в наш локальный. Мы можем клонировать проект, как показано ниже в этом документе:

npx degit your-name/template svelte-tailwind

Чтобы запустить проект, вы должны перейти в каталог проекта и запустить npm install. После установки зависимостей введите npm run dev команду в терминал. Svelte готов localhost:8080

🌐Установка попутного ветра

Перейдите на страницу Установка Tailwind PostCss и введите в терминал следующие команды:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Добавить в Svelte

Откройте rollup.config.js и импортируйте зависимости следующим образом:

import sveltePreprocess from 'svelte-preprocess';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import postcss from 'postcss';

В этом случае мы должны установить svelte-preprocess

npm install svelte-preprocess

затем добавьте препроцесс ниже plugins -> svelte, как показано ниже:

preprocess: sveltePreprocess({
  postcss: postcss({
    plugins: [tailwindcss(), autoprefixer()],
  }),
}),

и src/App.svelte файл выглядит следующим образом:

Вот и все. Tailwind CSS успешно импортирован в наш проект. Если вы хотите понять, как использовать svelte-preprocess, вы можете посмотреть эту документацию.

📖Макет

Мы должны создать макет, прежде чем начать добавлять классы Tailwind. Наш новый App.svelte файл выглядит так:

Теперь мы можем начать писать CSS для Tailwind, во-первых, мы добавим несколько классов в основной контейнер и установим центр экрана.

flex justify-center items-center h-screen

Затем есть контейнер приложения, ожидающий нового представления. Добавьте border-radiusс roundedи добавьте немного paddingс px-8и py-8

class="flex flex-col w-5/12 bg-slate-900 px-8 py-8 rounded-lg"

Добавляя классы в H1 и контейнер сообщений, наше приложение выглядит так:

mb-4 font-bold text-gray-50 text-4xl text-center -> H1
w-full mb-4 bg-gray-300 rounded-md px-4 py-4 -> DIV.messageContainer

После добавления всех классов в наш макет приложение выглядит так:

🔌Socket.IO

Если вы новичок в socket.io, не волнуйтесь, здесь мы просто перепроектируем пользовательское приложение чата, предоставленное Документацией по Socket.IO.

Сервер

Мы хотим создать сервер socket.io и использовать его в svelte. Если вы хотите этого, мы должны добавить cors для стройной подачи. Создайте server.js файл и добавьте код ниже:

Запустите эти команды и запустите сервер socket.io:

npm install socket.io
node server.js

Клиент

Установите Клиент Socket.IO

npm install socket.io-client

Импортируйте его и подключитесь к серверу:

import io from 'socket.io-client'
const socket = io("http://localhost:3000")

Создайте массив messages для хранения входящих сообщений и прослушивайте событие chat message для исходящих сообщений от других клиентов.

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

let messages = []
socket.on('chat message', (data) => {
  messages = [...messages, data]
})

И наша функция sendMessage:

function sendMessage() {
  socket.emit('chat message', message)
  message = ''
}

В итоге наш App.svelte выглядит так:

И результат: