common-css

Vue 3 通用 CSS 样式库，支持 Element Plus 黄色主题定制。

特性

• 🚀 通用 CSS 工具类
• 🎨 Element Plus 黄色主题定制
• 📦 Vue 3 组件支持
• 🔧 简单易用

安装

npm install common-css-shaomynwe

使用方法

1. 全局引入（推荐）

在 main.js 中：

import { createApp } from 'vue';
import App from './App.vue';
import commonCss from 'common-css-shaomynwe';
import 'common-css-shaomynwe/styles.css'; // 导入样式
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

// 注册 common-css
app.use(commonCss);

// 注册 Element Plus
app.use(ElementPlus);

app.mount('#app');

2. 单独引入组件

import { HelloBox } from 'common-css-shaomynwe';
import 'common-css-shaomynwe/styles.css';

export default {
  components: {
    HelloBox
  }
};

3. 在模板中使用

<template>
  <HelloBox message="Hello World" />
</template>

可用的 CSS 类

文本类

• .text-center - 文本居中
• .text-primary - 主题色文本

背景类

• .bg-primary - 主题色背景

布局类

• .flex - Flex 布局
• .flex-center - 水平垂直居中

间距类

• .p-1 - padding: 8px
• .p-2 - padding: 16px
• .m-1 - margin: 8px

装饰类

• .radius - 圆角 8px
• .shadow - 阴影效果

示例

<template>
  <div class="flex flex-center p-2 radius shadow bg-primary">
    <h1 class="text-center">欢迎使用 common-css</h1>
  </div>
</template>

依赖

• Vue 3.x
• Element Plus 2.x

作者

你的名字