vite配置unocss

vue3+vite+ts+eslint+prettier+stylelint+husky+lint-staged+commitlint+commitizen+cz-git介绍了关于vite+vue工程化搭建,现在在这个基础上,我们增加一下unocss

unocss官方文档

具体开发中使用遇到的问题可以参考不喜欢原子化CSS得我,还是在新项目中使用了Unocss - 掘金 (juejin.cn)

为什么要使用unocss,有必要使用吗?

UnoCSS 是即时原子 CSS 引擎,其设计灵活且可扩展。核心是不固定的,所有 CSS 工具都是通过预设提供的。

这个因人而异,最直接的就是可以应付面试,如果面试官问,

txt 复制代码
面试官:你了解(用过)原子化css吗?
我:内心os,什么是原子化css?
面试官:你都用过哪些原子化css库
我:???

安装

shell 复制代码
pnpm i -D unocss
# 样式重置,也可以不用
pnpm i @unocss/reset

vite.config.ts配置

ts 复制代码
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import UnoCss from "unocss/vite";

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

新建unocss.config.ts

ts 复制代码
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  shortcuts: [
    ["flex-center", "flex items-center justify-center"],
    ["flex-between", "flex items-center justify-between"],
    ["flex-start", "flex items-center justify-start"],
    ["flex-end", "flex items-center justify-end"],
  ],
  rules: [
      // 配置了eslint可能会有报错,在eslintrc.cjs 里面rules里面把规则关闭即可 "linebreak-style": "off" 
    [
      /^clamp-(\d+)$/,
      ([, d]) =>
        d === "1"
          ? {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
            }
          : {
              "-webkit-line-clamp": d,
              overflow: "hidden",
              "text-overflow": "ellipsis",
              display: "-webkit-box",
              "white-space": "normal",
              "-webkit-box-orient": "vertical",
            },
    ],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});
ts 复制代码
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  shortcuts: [
    ["flex-center", "flex items-center justify-center"],
    ["flex-between", "flex items-center justify-between"],
    ["flex-start", "flex items-center justify-start"],
    ["flex-end", "flex items-center justify-end"],
  ],
  rules: [
      // 配置了eslint可能会有报错,在eslintrc.cjs 里面rules里面把规则关闭即可 "linebreak-style": "off" 
    [
      /^clamp-(\d+)$/,
      ([, d]) =>
        d === "1"
          ? {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
            }
          : {
              "-webkit-line-clamp": d,
              overflow: "hidden",
              "text-overflow": "ellipsis",
              display: "-webkit-box",
              "white-space": "normal",
              "-webkit-box-orient": "vertical",
            },
    ],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

vscode安装插件,有助于开发的时候有提示,以及显示编译后的css

  • UnoCSS
  • WindiCSS IntelliSense

使用技巧

最后配置完就可以使用了

相关推荐
FliPPeDround2 天前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite
hans7748829682 天前
通过为前端项目接入GeoGebra,初步研究AI时代数学教案的生成方案
前端·vite·babel
Mr_兔子先生2 天前
2025盛夏版:基于electron37+vite7的React桌面客户端保姆教程
react.js·electron·vite
布兰妮甜3 天前
Vite:下一代前端构建工具的革命
前端·javascript·vite·构建工具
清岚_lxn3 天前
vue3 antd modal对话框里的前端html导出成pdf并下载
pdf·vue3·html2canvas·jspdf
MuGuiLin4 天前
Tailwind CSS快速上手 Tailwind CSS的安装、配置、使用
tailwind·tailwind css·原子化css·css框架·css引擎·tailwind css 扩展·uno css
阿琳a_6 天前
解决vue中使用vite-plugin-cesium插件打包后运行项目报错
前端·javascript·vue.js·vite·cesium
Yodame6 天前
webpack+vite前端构建工具全掌握(完结篇)
前端·vite
伍哥的传说8 天前
Vue3 Anime.js超级炫酷的网页动画库详解
开发语言·前端·javascript·vue.js·vue·ecmascript·vue3
科技D人生8 天前
Vue.js 学习总结(18)—— Vue 3.6.0-alpha1:性能“核弹“来袭,你的应用准备好“起飞“了吗?!
前端·vue.js·vue3·vue 3.6·vue3.6