有来团队后台项目-解析8

UnoCss

介绍

UnoCss

官网UnoCss

官网

安装

pnpm add -D unocss

引入

vite.config.ts

import UnoCSS from 'unocss/vite'
// plugins 中引入
UnoCSS({/* options */
}),

创建uno.config.ts

// uno.config.ts
import {defineConfig,presetAttributify,presetIcons,presetTypography,presetUno,presetWebFonts,transformerDirectives,transformerVariantGroup,
} from "unocss";export default defineConfig({shortcuts: {"flex-center": "flex justify-center items-center","flex-x-center": "flex justify-center","flex-y-center": "flex items-center","wh-full": "w-full h-full","flex-x-between": "flex items-center justify-between","flex-x-end": "flex items-center justify-end","absolute-lt": "absolute left-0 top-0","absolute-rt": "absolute right-0 top-0 ","fixed-lt": "fixed left-0 top-0",},theme: {colors: {primary: "var(--el-color-primary)",primary_dark: "var(--el-color-primary-light-5)",},},presets: [presetUno(),presetAttributify(),presetIcons(),presetTypography(),presetWebFonts({fonts: {// ...},}),],transformers: [transformerDirectives(), transformerVariantGroup()],
});

main.ts 中引入

// 引入uno.css
import "uno.css";

验证

<script setup lang="ts">
import { ref } from "vue";
import variables from "@/styles/variables.module.scss";
defineProps<{ msg: string }>();const count = ref(0);
</script><template><div><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button><hr /><el-icon size="16" color="red"><Edit /></el-icon><hr /><svg-icon icon-class="refresh" spin />刷新<hr /><div class="test-css">测试是否引入了颜色</div><hr /><div :style="{ 'background-color': variables['bgColor'] }">测试全局使用</div><hr /><button class="bg-blue w-80 h-10 ml-10 m-1">button</button></div>
</template><style scoped lang="scss">
.read-the-docs {color: #888;
}
.test-css {width: 100px;height: 100px;background-color: $bg-color;
}
</style>

测试结果