Unocss安装及使用
npm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
在 vite.config.ts 中使用
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 引入Unocss
import Unocss from "unocss/vite";
import {
presetUno, presetAttributify, presetIcons } from "unocss";
export default defineConfig({
plugins: [
vue(),
Unocss({
// 使用Unocss
presets: [presetUno(), presetAttributify(), presetIcons()],
}),
],
});
在 main.ts 中引入 unocss
import {
createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 导入Unocss
import "uno.css";
createApp(App).mount("#app");
代码中具体使用
<template>
<div class="text-25px text-#ff6700 bg-#ccc">你好Unocss</div>
</template>
图标库的具体使用
图标库, 你可以在里面看到大量的图标
安装图标库
pnpm i -D @iconify-json/logos
找到你喜欢的图标
例如:
选中你需要的图标,然后选中Unocss查看对应的class类名
代码中使用
<template>
<div class="i-logos-atomic-icon w-50px h-50px"></div>
</template>
Unocss 也可以增加一些预设css配置
在vite.config.ts增加 rules 规则
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite';
import {
presetUno, presetAttributify, presetIcons } from 'unocss'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Unocss({
presets: [
presetUno(),
presetAttributify(),
presetIcons()
],
rules: [ // 在这个可以增加预设规则, 也可以使用正则表达式
[
'p-c', // 使用时只需要写 p-c 即可应用该组样式
{
position: 'absolute',
top: '50%',
left: '50%',
transform: `translate(-50%, -50%)`
}
],
[/^m-(\d+)$/, ([, d]) => ({
margin: `${
d / 4}rem` })],
]
})
]
})