Создание приложения Vue с помощью Tailwind CSS
Существует адекватный выбор инструментов и рабочих процессов для создания динамических приложений. Потратив достаточно времени на исследования, вы можете согласиться со мной, что Vue и Tailwind CSS находятся в верхней части списка. Для меня следующий логический шаг — попробовать, прежде чем брать на себя обязательства. Цель этого письма состоит в том, чтобы вы почувствовали вкус этой установки, не тратя слишком много времени, чтобы вы могли принять собственное решение.
Обзор
Vue — это прогрессивный фреймворк JavaScript, а это значит, что вы можете начать использовать его, не зная всего.
Vue нацелен на создание пользовательских интерфейсов, но со стилем. Другими словами, Vue должен работать с фреймворком CSS. Tailwind — восходящая звезда в мире CSS, она будет расти, если вы терпеливо дадите Tailwind шанс. Мне нравится гладкая и свежая бесплатность Tailwind по сравнению с коммерчески проверенным, но часто скучным аналогом Bootstrap.
Два очевидных способа интегрировать Vue с Tailwind CSS: 1) Инициализировать проект с помощью Tailwind, затем добавить Vue или 2) Инициализировать во Vue, затем добавить Tailwind.
Мой опыт показал, что последний работает лучше. Документация с сайта Tailwind более точна, чем та, что была предоставлена с сайта Vue. Давайте начнем интеграцию со следующих шагов:
- Создать Vue-приложение
- Установите Tailwind в приложение
Создайте приложение в Vue
Чтобы создать свой проект, запустите npm init vite project-name. Вы должны увидеть это:
% npm init vite v901 Need to install the following packages: create-vite Ok to proceed? (y) ✔ Select a framework: › vue ✔ Select a variant: › vue Scaffolding project in /Users/seanzhai/www/v901... Done. Now run: cd v901 npm install npm run dev
Последняя команда npm run dev пока не нужна. Но проверить не помешает. Он создает локальный веб-сервер на порту 3000. Вы можете проверить это в любом браузере.
Настройка сервера разработки
Вы, наверное, заметили, что сервер разработки vite работает на порту 3000 локального хоста. Если вы хотите сделать свой сервер разработки доступным для доступа с других компьютеров, вы можете сделать это, изменив файл vite.config.js.
export default defineConfig({
plugins: [vue()],
server: {
port: '3030',
host: '0.0.0.0'
}
})
С настройками, как показано выше, когда вы делаете npm run dev , вы можете видеть, что вы обслуживаете весь мир через порт 3030. Вы, наверное, знаете, что вам, возможно, придется позаботиться о настройках брандмауэра, чтобы это работало.
Установите CSS Tailwind
Установите Tailwind и создайте его первоначальную конфигурацию.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -pВторая команда сгенерировала файл tailwind.config.js . Отредактируйте строку content, чтобы файл выглядел так, как показано ниже.
module.exports = {
content: [
"./vitesrc/index.html",
"./vitesrc/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Затем создайте index.css в папке src.
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;src используется для всего исходного кода, а внизу есть папка components для компонентов Vue. Нам нужно импортировать файл index.css в main.js, который является точкой входа для всех приложений.
// src/main.js import { createApp } from 'vue' import App from './App.vue' import './index.css'createApp(App).mount('#app')
До этого момента у вас должно быть функциональное приложение Vue, поддерживающее Tailwind CSS. Поздравляем с успешной интеграцией.
Красивый Vue с Tailwind
Наиболее распространенной критикой Tailwind является отсутствие готовых компонентов, что, вероятно, является основной причиной, по которой люди, имеющие опыт работы с начальной загрузкой, отказываются от Tailwind.
Решение Tailwind продвигает платный сервис tailwindui.com. Если бюджет не имеет значения, вы, безусловно, можете попробовать; он демонстрирует множество макетов и гаджетов, но их нелегко использовать в качестве шаблонов. Вам нужно с некоторыми усилиями адаптировать компоненты, предоставляемые tailwindui.
Что я считаю наиболее полезным, так это пользовательский интерфейс без головы, который специально разработан для работы с Tailwind. Он разработан теми же людьми, что и tailwindui.
Установка и первые шаги
Установка безголового пользовательского интерфейса очень проста.
npm install @headlessui/vue @heroicons/vue -DЗагляните на его официальный сайт.
Обратите внимание, что его компоненты поддерживают как React, так и Vue. Настройкой по умолчанию является React. Нажмите Vue, прежде чем переходить к определенному компоненту. Однажды я забыл об этом и наткнулся на раздел React, я обнаружил, что код немного иностранный. Из любопытства для сравнения: в Vue почти всегда требуется меньше строк, чем в React, для достижения того же результата.
Стилизуйте с помощью Headless UI
Вы можете многому научиться, потратив немного времени на анализ одного компонента. Меню (выпадающее) хорошо подходит в качестве примера. Давайте сделаем это вместе, используя Visual Studio Code.
Откройте корневую папку проекта с VS Code, найдите src. Создал папку с именем components, затем добавил файл Dropdown.vue. Давайте заполним меню самыми известными книгами Джоан Дидион. Файл выглядит следующим образом. Он основан на примере с веб-сайта HeadlessUI. Я немного упростил его и сделал отдельной страницей, чтобы за ним было легче следить.
Чтобы использовать этот компонент, нам просто нужно сослаться на него из основного приложения. Я добавил базовый стиль, чтобы компонент было легко увидеть.
Результат выглядит следующим образом:
Эпилог
И Vue, и Tailwind — потрясающие инструменты. Что мне больше всего понравилось в использовании Vue с Tailwind, так это то, что он позволяет вам оставаться в одном и том же контексте большую часть времени и не прыгает по файлам JavaScript, CSS и HTML; автоматическая перезагрузка сервера разработки также экономит время. Это рабочий процесс, который позволяет вам совершенствоваться, и вы обнаружите, что становитесь более продуктивным и менее напряженным.
Это весело и красиво.
