wx-screen-ui 1.0.0 → 1.0.1

package/README.md

@@ -1,5 +1,164 @@
-# Vue 3 + Vite
+# Wx Screen UI
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+一个基于 Vue 3 的组件库，提供了一系列常用的 UI 组件，帮助开发者快速构建前端界面。
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+## 特性
+
+- 基于 Vue 3 开发
+- 支持按需引入
+- 组件带有 Wx 前缀，避免命名冲突
+- 响应式设计
+- 易于使用和定制
+
+## 安装
+
+```bash
+# 使用 npm
+npm install wx-screen-ui
+
+# 使用 yarn
+yarn add wx-screen-ui
+
+# 使用 pnpm
+pnpm add wx-screen-ui
+```
+
+## 快速开始
+
+### 全局引入
+
+在 `main.js` 中引入：
+
+```javascript
+import { createApp } from "vue";
+import App from "./App.vue";
+import WxScreenUI from "wx-screen-ui";
+import "wx-screen-ui/style.css";
+
+const app = createApp(App);
+app.use(WxScreenUI);
+app.mount("#app");
+```
+
+### 按需引入
+
+在组件中按需引入：
+
+```javascript
+import { WxEmpty, WxTable } from "wx-screen-ui";
+import "wx-screen-ui/style.css";
+
+export default {
+	components: {
+		WxEmpty,
+		WxTable,
+	},
+};
+```
+
+## 组件列表
+
+### 基础组件
+
+- **WxEmpty** - 空状态组件
+- **WxRadio** - 单选框组件
+- **WxPagination** - 分页组件
+
+### 数据展示
+
+- **WxTable** - 表格组件
+- **WxEcharts** - ECharts 图表组件
+
+### 媒体组件
+
+- **WxVideoFromFlv** - FLV 视频播放器组件
+- **WxVideoFromHls** - HLS 视频播放器组件
+
+### 消息提示
+
+- **WxMessage** - 消息提示组件
+
+## 组件使用示例
+
+### WxEmpty 组件
+
+```vue
+<template>
+	<WxEmpty />
+</template>
+
+<script setup>
+	import { WxEmpty } from "wx-screen-ui";
+	import "wx-screen-ui/style.css";
+</script>
+```
+
+### WxTable 组件
+
+```vue
+<template>
+	<WxTable :data="tableData" :columns="columns" />
+</template>
+
+<script setup>
+	import { WxTable } from "wx-screen-ui";
+	import "wx-screen-ui/style.css";
+
+	const tableData = [
+		{ id: 1, name: "张三", age: 20 },
+		{ id: 2, name: "李四", age: 22 },
+	];
+
+	const columns = [
+		{ prop: "id", label: "ID" },
+		{ prop: "name", label: "姓名" },
+		{ prop: "age", label: "年龄" },
+	];
+</script>
+```
+
+## 开发指南
+
+### 克隆项目
+
+```bash
+git clone <repository-url>
+cd wx-screen-ui
+```
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 开发模式
+
+```bash
+npm run dev
+```
+
+### 构建组件库
+
+```bash
+npm run build
+```
+
+## 浏览器支持
+
+- Chrome (最新版本)
+- Firefox (最新版本)
+- Safari (最新版本)
+- Edge (最新版本)
+
+## 许可证
+
+MIT
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request 来改进这个组件库。
+
+## 联系我们
+
+如果您有任何问题或建议，请随时联系我们。