在 Vue 项目中使用 UnoCSS

使用 Vite 进行打包

安装

npm install -D unocss

编辑 vite.config.js 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import UnoCSS from 'unocss/vite'
import { presetWind3, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS({
      shortcuts: {
        'h1': 'text-3xl font-bold text-center mb-12',
      },
      presets: [presetWind3(), presetAttributify(), presetIcons()],
    }),
  ],
})

在主文件 main.js 内引入 UnoCSS

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

import '@unocss/reset/tailwind.css' // 清除默认样式

createApp(App).mount('#app')

浏览器样式重置

npm install @unocss/reset

在 main.js 内引入

import '@unocss/reset/tailwind.css' // 清除默认样式

这样可以让所有的 HTML 元素都有默认样式，然后再使用 UnoCSS 进行样式定制。

使用

在 App.vue 文件内使用 UnoCSS 样式

<template>
  <div class="mx-auto max-w-screen-lg py-12 px-4">

    <h1 h1>计时</h1>

  </div>
</template>

其中：

• h1 是自定义的快捷方式，可以直接使用 h1 标签，而不需要写完整的类名。也即配置文件内的 presetAttributify 预设。
• mx-auto、max-w-screen-lg、py-12、px-4 是默认的 Tailwind 样式。在 presetWind3 预设中。