【UnoCSS】在项目中的引入&使用

RIKA
565 阅读2分钟

​

 UnoCSS 是一个即时（on-demand）的原子化CSS引擎，它的设计灵感来源于Windi CSS和Tailwind CSS，但在性能和灵活性上进行了大幅优化。UnoCSS的核心理念是根据你在模板中的类名，动态生成CSS，避免了不必要的全局CSS加载。本文将介绍如何在Vue3+Vite+TypeScript项目中引入并使用UnoCSS主题。

​编辑

安装UnoCSS

运行以下命令：

npm install unocss -D

引入UnoCSS

安装完成后，在main.ts中引入

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

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

在vite.config.ts中配置：

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

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),
  ],
});

创建UnoCSS配置文件

为了更好地管理和自定义UnoCSS的行为，可以在项目的根目录下创建一个uno.config.ts文件，并添加以下代码：

import { defineConfig, presetUno, presetAttributify } from 'unocss';

export default defineConfig({
shortcuts: [
    [
      /^btn-(.*)$/,
      ([, c]) =>
        `w-54px h-34px lh-34px bg-${c} border-rd-6px text-16px text-center text-[#fff] hover:color-#838c96 hover:cursor-pointer`,
    ],
  ],
  presets: [
    presetUno(),
    presetAttributify()
  ],
});

在这个配置中，引入了2个预设，1个快捷短语设置shortcuts：

  • presetUno: UnoCSS的核心预设。
  • presetAttributify: 允许使用属性模式来应用样式。
  • 更多预设功能可以查看：Uno 预设

在组件中使用UnoCSS

如简单的flex布局、按钮背景、文字等样式设计：

<div class="min-h-36px lh-36px p-10px light flex">
  <div class="mr10 btn-[#373E4C]">确认1</div>
  <div class="mr10 btn-[#3258DF]">确认2</div>
  <div class="btn-[#D4D7DE]">取消</div>
</div>

​编辑

如想使用工具转换样式为CSS类名提升开发效率，可查看我的另一篇博客：

【UnoT】VSCode插件高效转换样式为UnoCSS类名文章浏览阅读218次，点赞6次，收藏5次。随着原子化CSS工具的兴起，UnoCSS作为一种新的解决方案，正逐渐被广大开发者所接受。它提供了一种灵活而高效的方式来管理和使用CSS样式。本文将介绍如何使用VSCode插件UnoT将传统CSS样式转换为UnoCSS类名，让开发者更专注于实现功能，而不是在样式转换上花费过多时间。_unocss vscode插件 https://blog.csdn.net/cjsnyxz/article/details/144140559

以上就是UnoCSS的安装和使用啦^-^

​

avatar
文章
阅读
粉丝