Как установить unocss в Vue 3

Сегодня мы установим и настроим vue 3 vite с unocss. UnoCSS — это атомарный движок CSS, а не фреймворк. Все разработано с учетом гибкости и производительности. В UnoCSS нет основных утилит, все функциональные возможности предоставляются через предустановки.
посмотреть

Содержание

Как установить unocss в vue 3
Установка Unocss & настройка конфигурационного файла Vite
Установка пресетов Unocss в vue 3

Как установить unocss в vue 3

Создайте проект Vue
Установите vue 3 с route и другими библиотеками.

npm init vue@latest

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Выберите требования к проекту.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
> cd <your-project-name>
> npm install
> npm run dev

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Установка Unocss & настройка конфигурационного файла Vite

установить unocss

npm i -D unocss

Войти в полноэкранный режим Выйти из полноэкранного режима

// vite.config.ts
import Unocss from 'unocss/vite'

export default {
  plugins: [
    Unocss({ /* options */ }),
  ],
}

Войти в полноэкранный режим Выйти из полноэкранного режима

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  Unocss({}),
],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Войти в полноэкранный режим Выход из полноэкранного режима

импортируйте uno.css в файл main.js
src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'uno.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

Войти в полноэкранный режим Выход из полноэкранного режима

HomeView.vue

<template>
  <div class="grid h-screen place-items-center">
    <div class="space-x-2">
      <h3 class="text-center">Vue 3 with Unocss button</h3>
      <button
        class="px-4 py-2 text-white bg-blue-400 border border-blue-200 rounded hover:bg-blue-500"
      >
        Button
      </button>
      <button
        class="px-4 py-2 text-white bg-red-400 border border-red-200 rounded hover:bg-red-500"
      >
        Button
      </button>
      <button
        class="px-4 py-2 text-white bg-green-400 border border-green-200 rounded hover:bg-green-500"
      >
        Button
      </button>
    </div>
  </div>
</template>

Войти в полноэкранный режим Выход из полноэкранного режима

Установка пресетов Unocss в vue 3

unocss предоставляет множество пресетов, например.

@unocss/preset-uno — пресет по умолчанию (сейчас он эквивалентен @unocss/preset-wind).

@unocss/preset-mini — минимальные, но необходимые правила и варианты.

@unocss/preset-wind — компактный пресет Tailwind / Windi CSS.

@unocss/preset-attributify — Обеспечивает режим атрибутирования для других пресетов и правил.

@unocss/preset-icons — Использование любой иконки в качестве утилиты класса.

@unocss/preset-web-fonts — Удобное использование веб-шрифтов.

@unocss/preset-typography — Предустановка типографики.

@unocss/preset-tagify — Режим Tagify для UnoCSS.

@unocss/preset-rem-to-px — Переводит rem в px для утилиты.

Установите некоторые из них и используйте.

npm i -D @unocss/preset-uno
npm i -D @unocss/preset-attributify

Вход в полноэкранный режим Выход из полноэкранного режима

Далее нужно добавить preset-uno и attributify в vite.config.js.
vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import Unocss from 'unocss/vite'
import vue from '@vitejs/plugin-vue'
import { presetAttributify, presetUno } from 'unocss'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  Unocss({
    presets: [presetAttributify(),presetUno()],
  }),
],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Вход в полноэкранный режим Выход из полноэкранного режима

HomeView.vue

<template>
  <div class="grid h-screen place-items-center">
    <div class="space-x-2">
      <h3 text="center">create unocss button using preset-attributify </h3>
      <button
        bg="blue-400 hover:blue-500"
        text="sm white"
        font="mono light"
        p="y-2 x-4"
        border="2 rounded blue-200"
      >
        Button
      </button>
      <button
        bg="red-400 hover:red-500"
        text="sm white"
        font="mono light"
        p="y-2 x-4"
        border="2 rounded red-200"
      >
        Button
      </button>
      <button
        bg="green-400 hover:green-500"
        text="sm white"
        font="mono light"
        p="y-2 x-4"
        border="2 rounded green-200"
      >
        Button
      </button>
    </div>
  </div>
</template>

Вход в полноэкранный режим Выход из полноэкранного режима