首页 前端知识 vue3项目 引入unocss原子化

vue3项目 引入unocss原子化

2024-05-09 10:05:39 前端知识 前端哥 642 621 我要收藏

unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码。

当然,原子样式也有很多选择,最著名的就是 Tailwind。但由于Tailwind 会生成大量样式定义,会导致全量的 CSS 文件往往体积会多至数 MB,从而有性能上有一些不足
  • 安装unocss
npm i unocss -S
  • 在vite.config.ts 中进行引入
import unoCss from 'unocss/vite'

export default defineConfig({
  plugins: [
    unoCss({
      rules:[
        // 定义了flex,red 即可直接使用 
        ['flex',{display:'flex'}],
        ['red',{color:'red'}]
      ]
    })
  ],

})
  • main.ts 中引入
/* .... */

import 'uno.css'

/* .... */
  • App.vue 中 使用
<template>
  <div class="flex red">
    unocss
  </div>
</template>
  • 在vite.config.ts 中也可以增加一些预设
/**
 * presetIcons: 加载icon图标
 * presetAttributify: 代码中如m-1可以直接写m="1"
 * presetUno: 兼容了tailwindcss,可以直接使用里面的class
 */
import { presetIcons, presetUno, presetAttributify } from 'unocss'

// 用法:

export default defineConfig({
  plugins: [
    unoCss({
      presets:[presetIcons(),presetAttributify(),presetUno()],
      rules:[
        // 定义了flex,red 即可直接使用 
        ['flex',{display:'flex'}],
        ['red',{color:'red'}]
      ]
    })
  ],
})

  • 使用图标的话,需要安装
    图标网址:https://icones.js.org
// 后面跟的/ic 根据自己使用的图标集合来决定,按需引入下载
npm i -D @iconify-json/ic

// 使用
// bg-gray-100 对应presetUno预设
// m="10" 对应presetAttributify预设
// class="i-ic-baseline-alarm-on" 对应presetIcons预设
<template>
  <div class="cike bg-gray-100" m="10">
    unocss
  </div>
  <div class="i-ic-baseline-alarm-on">

  </div>
</template>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7623.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!