Vite-plugin-atom-css-generator NPM

Vite Atom CSS Generator 插件

一个简单的Vite插件，用于从Vue 3模板中的类名自动生成原子级CSS样式，并自动注入到项目中。

安装

使用npm或yarn或pnpm进行安装:

npm i vite-plugin-atom-css-generator
yarn add vite-plugin-atom-css-generator
pnpm add vite-plugin-atom-css-generator

使用方法

在你的vite.config.js中引入并使用此插件：

import atomCssGenerator from 'vite-plugin-atom-css-generator';

export default {
  plugins: [
    atomCssGenerator({ outputPath: 'desired_output_path' }),
    // ...其他插件
  ]
}

⚠️ 必须放在@vitejs/plugin-vue插件的前面

plugins:[atomCssGenerator(),vue()]

在Vue组件的模板中使用特定格式的类名，例如：fc-fff。在构建时，插件将自动生成如下的CSS：

.fc-fff { color: #fff; }

构建项目后，style.css将自动被生成在指定的outputPath目录中，并自动注入到项目的HTML文件中。

配置

以下是插件可接受的配置选项：

outputPath (可选): 指定生成的style.css文件的路径。默认值为public。例子：

atomCssGenerator({ outputPath: 'assets/styles' })

使用上述配置，style.css将被生成在assets/styles目录中，并在HTML中自动注入为/assets/styles/style.css。

原子类名规则

目前，此插件只支持以下格式的原子类名：

类名规则

颜色类

类名	样式描述	示例
`fc-{color}`	文字颜色	`.fc-333 { color: #333; }`
`bgc-{color}`	背景颜色	`.bgc-f2f2f2 { background-color: #f2f2f2; }`
`bc-{color}`	边框颜色	`.bc-ccc { border-color: #ccc; }`
`btc-{color}`	上边框颜色	`.btc-000 { border-top-color: #000; }`
`brc-{color}`	右边框颜色	`.brc-333 { border-right-color: #333; }`
`bbc-{color}`	下边框颜色	`.bbc-f00 { border-bottom-color: #f00; }`
`blc-{color}`	左边框颜色	`.blc-0f0 { border-left-color: #0f0; }`

边距类

类名	样式描述	示例
`m-{size}`	外边距	`.m-20 { margin: 20px; }`
`mt-{size}`	上外边距	`.mt-10 { margin-top: 10px; }`
`mr-{size}`	右外边距	`.mr-15 { margin-right: 15px; }`
`mb-{size}`	下外边距	`.mb-30 { margin-bottom: 30px; }`
`ml-{size}`	左外边距	`.ml-5 { margin-left: 5px; }`
`p-{size}`	内边距	`.p-20 { padding: 20px; }`
`pt-{size}`	上内边距	`.pt-10 { padding-top: 10px; }`
`pr-{size}`	右内边距	`.pr-15 { padding-right: 15px; }`
`pb-{size}`	下内边距	`.pb-30 { padding-bottom: 30px; }`
`pl-{size}`	左内边距	`.pl-5 { padding-left: 5px; }`

宽高大小类

类名	样式描述	示例
`w-{size}`	宽度	`.w-100 { width: 100px; }`
w-{size}p	宽度%	`.w-50p { width: 50%; }`
`h-{size}`	高度	`.h-200 { height: 200px; }`
h-{size}p	高度%	`.h-50p {height`: 50%; }
`fs-{size}`	字体大小	`.fs-14 { font-size: 14px; }`
`fw-{weight}`	字体粗细	`.fw-bold { font-weight: bold; }`
`fs-{style}`	字体样式	`.fs-italic { font-style: italic; }`
`td-{decoration}`	文本装饰	`.td-underline { text-decoration: underline; }`

flex布局类

类名	样式描述	示例
`d-flex`	Flexbox布局	`.d-flex { display: flex; }`
`fd-column`	纵向布局	`.fd-column { flex-direction: column; }`
`jc-center`	水平居中	`.jc-center { justify-content: center; }`
`ai-stretch`	垂直拉伸对齐	`.ai-stretch { align-items: stretch; }`

边框类

类名	样式描述	示例
`bw-{width}`	边框宽度	`.bw-2 { border-width: 2px; }`
`bs-{style}`	边框样式	`.bs-dashed { border-style: dashed; }`
`bc-{color}`	边框颜色	`.bc-333 { border-color: #333; }`
`bt-{width}-{color}-{style}`	上边框	`.bt-1-f00-solid { border-top: 1px #f00 solid; }`
`br-{width}-{color}-{style}`	右边框	`.br-2-0f0-dotted { border-right: 2px #0f0 dotted; }`
`bb-{width}-{color}-{style}`	下边框	`.bb-3-00f-double { border-bottom: 3px #00f double; }`
`bl-{width}-{color}-{style}`	左边框	`.bl-1-fff-dashed { border-left: 1px #fff dashed; }`

布局类

类名	样式描述	示例
`p-relative`	相对定位	`.p-relative { position: relative; }`
`p-absolute`	绝对定位	`.p-absolute { position: absolute; }`
`p-fixed`	固定定位	`.p-fixed { position: fixed; }`

鼠标样式类

类名	样式描述	示例
`c-pointer`	鼠标手形	`.c-pointer { cursor: pointer; }`
`c-wait`	鼠标等待	`.c-wait { cursor: wait; }`

其他类

类名	样式描述	示例
`o-hidden`	内容溢出隐藏	`.o-hidden { overflow: hidden; }`
`ox-scroll`	水平滚动	`.ox-scroll { overflow-x: scroll; }`
`oy-auto`	垂直自动	`.oy-auto { overflow-y: auto; }`

预定义的实用样式

类名	样式描述
te-ellipsis	单行文本溢出显示省略号
te-ellipsis-2	多行文本溢出显示省略号 (最多两行)
grid-3cols	使用 Grid 实现三列布局
card-shadow	实现一个卡片的阴影边框