爱酷文化

Admin
2024 - 5 - 5

UnoCSS什么？

UnoCSS 是一个现代、灵活且高性能的 CSS 引擎。它通过预设提供核心 CSS 功能，使应用程序样式设置快速、轻松，而不会影响性能或灵活性。它使用原子 CSS 原则，允许创建小型、可重用的样式，这些样式可以组合起来进行复杂的设计。 UnoCSS 可以开发高性能应用程序，而不受流行框架的限制。

让我们轻松使用Vue3 + Vite

首先，我建议查看官方文档：https://unocss.dev/guide。

首先，我们创建我们的Vue项目

npm init vue@latest

一步步选择项目名称和需求后，我们将在项目中包含UnoCSS。以下是设置示例。

Vue.js - The Progressive JavaScript Framework

✔ Project name: … unocss-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No

Scaffolding project in ../unocss-vue...

Done. Now run:

  cd unocss-vue
  npm install
  npm run dev

让我们导航到项目的安装目录并运行npm install命令来安装项目依赖。

依赖安装完毕后，让我们继续安装UnoCSS

npm i -D unocss

UnoCSS 已添加到项目依赖项中，现在让我们将依赖包包含在 vite.config.js 文件中。

// vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// import UNOCSS
import Unocss from 'unocss/vite'

export default defineConfig({
  plugins: [vue(),Unocss({})], // define as plugin.
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

我们可以通过向项目主入口main.js文件中导入来开始使 uno.css 文件；

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

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

接下来就可以开始使用UnoCSS了，而且还通过使用“预设”（预定义的包）对其进行自定义。可以在这里查看所有其他软件包的文档。

让我简单提一下我们将安装的软件包：

Uno预设：它作为流行框架的通用版本工作，例如Tailwind CSS、Windi CSS、Bootstrap、Tachyons等。

属性预设：您可以在 HTML 元素内使用属性模式，例如；

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

让我们将这两个包安装到我们的项目中，

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

然后将安装的包添加到 vite.config.js 文件并定义它们的设置，

// vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// UNOCSS
import Unocss from 'unocss/vite'
import { presetAttributify, presetUno } from 'unocss' // Presets

export default defineConfig({
  plugins: [vue(),
  Unocss({
    presets: [presetAttributify(),presetUno()], // Presets
  })],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

所有安装均已完成。现在我们可以在我们的 Vue 项目中使用 UnoCSS，我强烈建议使用VS Code 扩展。对于Jetbrains IDE，插件地址在这里。

App.vue 模板结构示例：

<template>
  <nav text-white bg-green-5 flex justify-between font-sans vw-100 py-6 px-4>
    <div>Logo</div>
    <div w-10rem flex justify-around>
      <span>Home</span>
      <span>Contact</span>
    </div>
  </nav>
  <main flex justify-center items-center vw-100 h-20rem bg-gray-2 >
    <div font-sans text-3xl font-500>Hero</div>
  </main>
</template>