Outfit 组件库

一个 Vue2 组件库，包含可复用的业务组件，基于 Element UI、Vuex 和 Vue Router 构建。

功能特性

• 图片上传: 支持图片上传、验证和进度跟踪
• 评分: 交互式评分组件，支持自定义颜色和半星评分
• 文章卡片: 显示文章或卡片，包含元数据和交互选项
• 工具函数: 存储、格式化和验证的辅助函数
• 完整示例: 包含路由和状态管理的完整演示应用

安装

npm install @yourname/outfit-components

快速开始

全局注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import OutfitComponents from '@yourname/outfit-components'

Vue.use(ElementUI)
Vue.use(OutfitComponents)

使用

<template>
  <div>
    <!-- 图片上传 -->
    <image-upload
      action="https://api.example.com/upload"
      :limit="5"
      @success="handleSuccess"
    ></image-upload>

    <!-- 评分 -->
    <rating
      v-model="rating"
      :allow-half="true"
      @change="handleChange"
    ></rating>

    <!-- 文章卡片 -->
    <essay-card
      title="我的文章"
      content="文章内容..."
      :date="new Date()"
      :views="100"
      :likes="50"
      @read="handleRead"
    ></essay-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 3
    }
  },
  methods: {
    handleSuccess(data) {
      console.log('上传成功:', data)
    },
    handleChange(value) {
      console.log('评分已改变:', value)
    },
    handleRead(data) {
      console.log('阅读文章:', data)
    }
  }
}
</script>

组件

图片上传

上传图片并进行验证和错误处理。

属性:

• action (String, 必需): 上传端点 URL
• headers (Object): 上传请求的自定义请求头
• limit (Number): 最大图片数量 (默认: 5)
• maxSize (Number): 最大文件大小，单位字节 (默认: 5MB)

事件:

• success: 上传成功时触发
• error: 上传失败时触发

评分

交互式评分组件。

属性:

• value (Number): 当前评分值
• max (Number): 最大评分值 (默认: 5)
• allowHalf (Boolean): 是否允许半星评分 (默认: false)
• disabled (Boolean): 是否禁用交互 (默认: false)
• showText (Boolean): 是否显示评分文本 (默认: true)
• colors (Array): 不同等级的星星颜色
• voidColor (String): 空星的颜色

事件:

• input: 评分改变时触发 (支持 v-model)
• change: 评分改变时触发

文章卡片

显示文章或卡片。

属性:

• title (String, 必需): 文章标题
• content (String, 必需): 文章内容
• date (String|Date, 必需): 发布日期
• views (Number): 浏览次数 (默认: 0)
• likes (Number): 点赞数 (默认: 0)

事件:

• read: 点击"阅读更多"按钮时触发

工具函数

通过 this.$utils 访问工具函数:

存储

// 设置项
this.$utils.storage.setItem('key', { data: 'value' })

// 获取项
const data = this.$utils.storage.getItem('key', defaultValue)

// 移除项
this.$utils.storage.removeItem('key')

// 清空所有
this.$utils.storage.clear()

格式化

// 格式化日期
this.$utils.format.date(new Date(), 'YYYY-MM-DD HH:mm:ss')

// 格式化文件大小
this.$utils.format.fileSize(1024 * 1024) // "1 MB"

验证

// 验证邮箱
this.$utils.validate.email('[email protected]')

// 验证手机号
this.$utils.validate.phone('13800138000')

// 验证 URL
this.$utils.validate.url('https://example.com')

开发

安装

# 安装依赖
npm install

# 安装示例依赖
cd examples && npm install && cd ..

运行示例

npm run dev

这将在 http://localhost:8080 启动开发服务器，支持热模块替换。

构建库

npm run build

生成以下文件:

• dist/index.js - UMD 格式
• dist/index.esm.js - ES Module 格式
• dist/index.css - 样式文件

开发构建

npm run build:dev

发布到 npm

1. 更新 package.json 中的版本号
2. 构建库: npm run build
3. 发布: npm publish

prepublishonly 脚本会在发布前自动构建。

项目结构

component-library/
├── packages/                    # 组件库源代码
│   ├── components/              # Vue 组件
│   │   ├── ImageUpload/
│   │   ├── Rating/
│   │   ├── EssayCard/
│   │   └── index.js
│   ├── utils/                   # 工具函数
│   │   └── index.js
│   └── index.js                 # 主入口
├── examples/                    # 演示应用
│   ├── src/
│   │   ├── main.js
│   │   ├── App.vue
│   │   ├── router.js
│   │   ├── store.js
│   │   └── views/
│   ├── public/
│   └── package.json
├── dist/                        # 构建输出 (生成)
├── webpack.config.js            # 库构建配置
└── package.json

许可证

MIT