Существует два способа создания проекта vue3. С помощью Vue-CLI или Vite. Я рассмотрю оба способа.
Использование Vite
Если у вас еще не установлен Vite, вам необходимо установить его. Вы можете установить его с помощью этой команды:
npm install -g vite
Теперь, когда у вас установлен Vite, вам нужно создать ваше Vue3-приложение. Вы можете создать его с помощью этой команды:
npm init @vitejs/app vue3-vite-tailwind-app
После завершения установки вам будет предложено перейти в каталог, содержащий только что созданное приложение Vue3. Как только вы окажетесь в этом каталоге, вы сможете установить все необходимые зависимости, выполнив команду:
npm install
Теперь нам нужно добавить TailwindCSS в наше приложение Vue3. Tailwind требует двух зависимостей: autoprefixer и postcss.
Вы можете установить как Tailwind, так и одноранговые зависимости с помощью этой команды:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Для использования TailwindCSS необходимо создать конфигурационный файл. Мы будем использовать npx, который поставляется в комплекте с Node.js, чтобы создать наш конфигурационный файл с помощью этой команды:
npx tailwindcss init -p
Вы увидите, что это добавило два новых файла в ваш проект Vue3. Эти два файла — tailwind.config.js и postcss.config.js.
Чтобы иметь возможность использовать TailwindCSS в нашем проекте, нам нужно добавить несколько строк в наш CSS-файл, который загружается в нашем приложении. Откройте ваш CSS-файл и добавьте следующие 3 строки:
@tailwind base;
@tailwind components;
@tailwind utilities;
Теперь вы можете начать использовать Tailwind для стилизации вашего приложения Vue 3.
Использование Vue CLI
Если у вас еще не установлен Vue CLI, вам необходимо установить его. Вы можете установить его с помощью этой команды:
npm install -g @vue/cli
Теперь, когда у вас установлен Vue CLI, вам нужно создать ваше приложение Vue3. Вы можете создать его с помощью этой команды:
vue create vue3-cli-tailwind-app
Вам будет предложено выбрать любые опции, которые вы хотите установить для своего приложения.
Теперь, когда приложение создано, нам нужно добавить TailwindCSS. Вы можете легко добавить его с помощью этой команды:
vue add tailwind
Вам будет предложено выбрать тип файла конфигурации Tailwind, который вы хотите создать. Вы можете выбрать следующие варианты:
- none — Не будет создавать файл конфигурации. Полезно, если у вас уже есть конфигурация (не забудьте настроить PurgeCSS).
- minimal (по умолчанию) — Будет создан минимальный файл tailwind.config.js, в котором вы сможете определить свои настройки.
- full (полный) — создаст файл tailwind.config.js, содержащий всю конфигурацию по умолчанию.
Теперь вы можете начать использовать Tailwind для стилизации вашего приложения Vue 3.