Pixel Flow Vue

一个基于 Vue 3 和 Vant UI 的移动端业务组件库，专为电商场景设计，提供常用的页面组件。

功能特性

• ✨ 基于 Vue 3 Composition API
• 📦 轻量级组件库
• 🎨 预设电商常用组件
• 📝 完整的 TypeScript 支持
• 🎯 按需引入

安装

npm install pixel-flow-vue vant
# 或者
yarn add pixel-flow-vue vant
# 或者
pnpm add pixel-flow-vue vant

重要：关于 Vant 依赖

本组件库依赖 Vant UI，使用前需要在你的项目中单独安装和配置 Vant。Vant 不会被打包进本组件库中，这样可以避免版本冲突和重复打包。

支持的 Vant 版本

• Vant 4.x
• Vant 5.x

快速开始

完整引入（推荐）

import { createApp } from 'vue'
import App from './App.vue'
import Vant, { Lazyload } from 'vant'
import 'vant/lib/index.css'
import pixelFlowVue from 'pixel-flow-vue'
import 'pixel-flow-vue/dist/pixel-flow-vue.css'

const app = createApp(App)

// 1. 先安装 Vant
app.use(Vant)

// 2. 安装 Lazyload（如果使用了懒加载功能）
app.use(Lazyload)

// 3. 再安装 pixel-flow-vue
app.use(pixelFlowVue)

app.mount('#app')

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import Vant, { Lazyload } from 'vant'
import 'vant/lib/index.css'
import { hxButton, hxAdGrid, hxBannerSwipe, hxHotSaleList } from 'pixel-flow-vue'
import 'pixel-flow-vue/dist/pixel-flow-vue.css'

const app = createApp(App)

// 1. 先安装 Vant
app.use(Vant)

// 2. 安装 Lazyload（如果使用了懒加载功能）
app.use(Lazyload)

// 3. 再注册需要的组件
app.use(hxButton)
app.use(hxAdGrid)
app.use(hxBannerSwipe)
app.use(hxHotSaleList)

app.mount('#app')

组件列表

1. hx-button

基础按钮组件

<template>
  <hx-button />
</template>

2. hx-adgrid

三图广告位组件

<template>
  <hx-adgrid />
</template>

数据结构：

import type { AdItem } from 'pixel-flow-vue'

const adItem: AdItem = {
  id: 1,
  imageUrl: 'https://example.com/image.jpg',
  linkUrl: 'https://example.com',
  title: '广告标题'
}

3. hx-banner-swipe

轮播图组件

<template>
  <hx-banner-swipe />
</template>

数据结构：

import type { BannerItem } from 'pixel-flow-vue'

const bannerItem: BannerItem = {
  id: 1,
  imageUrl: 'https://example.com/banner.jpg',
  linkUrl: 'https://example.com',
  title: '轮播标题'
}

4. hx-hotSaleList

热卖商品列表组件

<template>
  <hx-hotSaleList title="热卖推荐" />
</template>

Props：

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | title | 标题 | string | '热卖推荐' |

数据结构：

import type { ProductItem } from 'pixel-flow-vue'

const productItem: ProductItem = {
  id: 1,
  name: '商品名称',
  price: '99.99',
  imageUrl: 'https://example.com/product.jpg',
  linkUrl: 'https://example.com/product'
}

类型定义

// 轮播图单项
interface BannerItem {
  id: string | number
  imageUrl: string
  linkUrl?: string
  title?: string
}

// 广告位单项
interface AdItem {
  id: string | number
  imageUrl: string
  linkUrl?: string
  title?: string
}

// 商品项
interface ProductItem {
  id: string | number
  name: string
  price: string | number
  imageUrl: string
  linkUrl?: string
}

// 主题商品项
interface ThemeProductItem extends ProductItem {
  tag?: string
  originalPrice: string | number
}

常见问题

Q: 为什么 Vant 组件没有生效？

A: 请确保按照以下步骤操作：

1. 确认已正确安装 Vant：npm install vant
2. 在 app 中先注册 Vant：app.use(Vant)
3. 如果使用了图片懒加载，还需要注册 Lazyload：app.use(Lazyload)
4. 最后再注册 pixel-flow-vue

Q: 如何避免 Vant 重复打包？

A: 本组件库已经将 Vant 设置为 peerDependencies，不会被打包进组件库中。请确保你的项目使用正确的包管理器配置。

Q: 我可以使用不同版本的 Vant 吗？

A: 可以！本组件库支持 Vant 4.x 和 Vant 5.x，你可以根据项目需要选择合适的版本。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 预览
npm run preview

项目结构

pixel-flow-vue/
├── dist/                # 构建输出
├── examples/            # 示例代码
├── packages/            # 组件源码
│   ├── hx-adgrid/       # 广告位组件
│   ├── hx-banner-swipe/ # 轮播图组件
│   ├── hx-button/       # 按钮组件
│   ├── hx-hotsaleList/  # 热卖列表组件
│   ├── index.ts         # 组件入口
│   └── types.ts         # 类型定义
├── package.json
├── vite.config.ts
└── pixel-flow-vue.d.ts  # 类型声明

License

MIT