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 |
实现一个卡片的阴影边框 |
常见问题
我可以扩展原子类名规则吗？
目前，此插件固定了原子类名规则。要添加更多规则，你需要直接编辑插件的源代码。
为什么我的style.css没有被注入？
确保outputPath的配置正确，并且HTML中存在 </head>标签，因为插件是将 <link>标签插入到此位置的。