@wiphone/wiux

wiux — Mobile web UI Components based on Vue 3 and WeUI.

关于这个项目

VUX 曾经风靡一时，几乎可以说是 Vue 移动端组件库的唯一选择。

后来原作者停止了维护，我一直深感遗憾 —————— 毕竟还有项目在依赖它 😂。

维护的念头不是没有过，但原项目体量庞大，加上自己能力有限、精力也有限，始终没能迈出那一步。

感谢 AI 的出现，本项目在 AI 的协助下，完成了 VUX 从 Vue 2 到 Vue 3 的全量升级，现在它叫 WIUX。

当然了，wiux和vux2是两个不同的项目，只是看上去基本一样而已 —————— 毕竟vue3也没办法兼容vue2。

请注意：本项目没有进行严格的测试，不要将本项目用于生产环境，仅用于学习和开发。

Requirements

• vue ^3.4.0
• node ^20.19.0 || >=22.12.0

Quick Start

Installation

npm install wiux

Usage

import { createApp } from 'vue'
import App from './App.vue'

import Wiux from 'wiux'
import 'wiux/dist/style.css'

const app = createApp(App)
app.use(Wiux)
app.mount('#app')

Or import components on demand:

import { XButton, Toast, Group, Cell } from 'wiux'

Components

Layout / 布局

Typography / 排版

Icon / 图标

Button / 按钮

Form / 表单

Feedback / 反馈

Navigation / 导航

Other / 其他

Chart / 图表

Internationalization / 国际化

wiux 内置中英文双语支持，基于 vue-i18n。

import { createLocale } from 'wiux'

// 设置为英文
createLocale('en')

// 自定义语言包
createLocale({
  'Done': '完成',
  'Uploader.title': '上传图片'
})

所有语言包键值见 src/locales。

Plugin APIs / 插件式调用

除组件形式外，也支持函数式调用：

import { toast, alert, confirm, loading, datetime } from 'wiux'

// Toast
toast({ text: '操作成功', type: 'success' })

// Alert
await alert({ title: '提示', content: '确定要删除吗？' })

// Confirm
const ok = await confirm({ title: '确认', content: '确定要执行此操作？' })
if (ok) { /* ... */ }

// Loading
loading.show({ text: '加载中...' })
loading.hide()

// Datetime
const date = await datetime({ value: '2024-01-01', format: 'YYYY-MM-DD' })

插件式调用使用前需 app.use(Plugin) 注册，详见 app.use(Wiux) 后自动包含。

Development / 开发

# 安装依赖
npm install

# 启动 Demo 开发服务
npm run demo

# 构建 Demo
npm run demo:build

# 构建组件库
npm run build

Wiux is Inspired or Powered By

• Vue
• WeUI
• Ant Design Mobile
• PhotoSwipe
• F2（图表）

License

MIT