开源项目 fake-css 使用教程

开源项目 fake-css 使用教程

fake-cssfake-css is javascript runtime css framework项目地址:https://gitcode.com/gh_mirrors/fa/fake-css

项目介绍

fake-css 是一个基于 Vue3 开发的运行时 CSS 库，旨在提供一种零预先配置、开箱即用的 CSS 解决方案。它不存在真正意义上的 CSS 文件，但又能像有文件一样正常运行，从而从根源上解决项目包大小的问题。如果你熟悉 TailwindCSS 或 WindiCSS 等原子 CSS，将极易上手。

项目快速启动

安装

你可以通过 npm 或 yarn 安装 fake-css：

# 使用 npm
npm install fake-css

# 使用 yarn
yarn add fake-css

基本使用

在你的 Vue 组件中引入并使用 fake-css：

<template>
  <div :class="[css.pt_30]">
    <!-- 这里的 pt_30 表示 padding-top: 30px -->
  </div>
</template>

<script>
import { css } from 'fake-css';

export default {
  setup() {
    return { css };
  }
}
</script>

应用案例和最佳实践

动态样式

fake-css 支持动态解析样式，例如：

<template>
  <div :class="[css[`pt_${dynamicValue}`]]">
    <!-- 这里的 pt_${dynamicValue} 会根据 dynamicValue 的值动态解析 -->
  </div>
</template>

<script>
import { css } from 'fake-css';

export default {
  setup() {
    const dynamicValue = ref(30); // 可以动态改变
    return { css, dynamicValue };
  }
}
</script>

组合样式

你可以组合多个样式类：

<template>
  <div :class="[css.pt_30, css.ml_20]">
    <!-- 这里的 pt_30 和 ml_20 分别表示 padding-top: 30px 和 margin-left: 20px -->
  </div>
</template>

典型生态项目

与 TailwindCSS 结合

虽然 fake-css 本身提供了原子 CSS 的功能，但你仍然可以将其与 TailwindCSS 结合使用，以获得更丰富的样式选项：

<template>
  <div class="bg-blue-500 text-white p-4">
    <!-- 这里的 class 使用了 TailwindCSS 的样式 -->
    <div :class="[css.pt_30]">
      <!-- 这里的 pt_30 使用了 fake-css 的样式 -->
    </div>
  </div>
</template>

<script>
import { css } from 'fake-css';

export default {
  setup() {
    return { css };
  }
}
</script>

通过这种方式，你可以在保持项目轻量化的同时，获得更丰富的样式支持。

fake-cssfake-css is javascript runtime css framework项目地址:https://gitcode.com/gh_mirrors/fa/fake-css