今天,我们将使用 unocss 安装和设置 vue 3 vite。 UnoCSS 是一个原子 CSS 引擎,而不是一个框架。一切的设计都考虑到了灵活性和性能。 UnoCSS 中没有核心实用程序,所有功能都是通过预设提供的。

查看

如何在vue 3中安装unocss

创建 Vue 项目

使用路由和其他库安装 vue 3。

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 & Setup 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))
    }
  }
})

进入全屏模式 退出全屏模式

在 main.js 文件中导入 uno.css

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.view

<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>

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--HoFqukV---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/uploads/articles/x7ke4acyw6h47mcn52ag.png)

在vue 3中安装Unocss Presets

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 - 轻松使用 Web 字体。

@unocss/preset-typography - 排版预设。

@unocss/preset-tagify - UnoCSS 的标记模式。

@unocss/preset-rem-to-px - 将 rem 转换为 px 用于 utils。

让我们安装其中的一些并使用。

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

进入全屏模式 退出全屏模式

接下来需要在 vite.config.js 中添加 preset-uno 和属性。

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.view

<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>

进入全屏模式 退出全屏模式

[中安装 unocss 预设](https://res.cloudinary.com/practicaldev/image/fetch/s--_9VBg--F--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy4zm5b029fenhv8q4hk.png)