dpzvc3-ui

dpzvc3-ui

一、说明

一套基于 Vue 3.X 的h5移动端通用组件库，提供丰富 UI 组件，兼容最新Vue3.x + Typescript Cli项目（可以在Vue3.x + Typescript Cli项目直接引用组件并使用）使用最新的Vite构建，并支持 组件以及CSS样式全量引入 和 按需引入，同时提供公共样式、基础工具样式和服务组件方法（如 Message、Modal、Indicator）。会一直不断完善体验，使用过程有问题欢迎在https://github.com/yishide/dpzvc3/issues提交bug，看到了会及时修复！！！

// "start": "node server.js", // "vercel-build": "npm run build:ssr"

二、组件库预览地址（查看各个组件库的使用效果）

   https://yishide.github.io/dpzvc3/#/guide

三、安装

npm install dpzvc3-ui

四、全量使用

全量引入组件库，包括 JS 组件和全量 CSS 样式（适合小型项目或快速开发）。

1. 引入组件库 JS

import { createApp } from 'vue'
import App from './components/app.vue'
import dpzvc3 from 'dpzvc3-ui'

// 1️⃣ 创建 app
const app = createApp(App)

// 2️⃣ 安装你的组件库
app.use(dpzvc3)

2. 引入全量样式

/* 在入口文件或全局样式中引入 */

@import "~dpzvc3-ui/dist/styles/dpzvc3.css";

此方式会包含 components、base、utils 下的全部样式。

五、按需使用

按需引入可以减小打包体积，只引入你需要的组件及样式。

1. 引入组件

import { createApp } from 'vue'
import App from './components/app.vue'
import { VButton, Badge } from 'dpzvc3-ui'

// 1️⃣ 创建 app
const app = createApp(App)

// 2️⃣ 安装你的组件库
app.use(VButton)
app.use(Badge)

2. 引入组件 CSS

@import "~dpzvc3-ui/dist/styles/components/button.css";
@import "~dpzvc3-ui/dist/styles/components/badge.css";

3. 公共样式按需引入（可选）建议全部加上

@import "~dpzvc3-ui/dist/styles/base/font.css";
@import "~dpzvc3-ui/dist/styles/base/variable.css";
@import "~dpzvc3-ui/dist/styles/base/reset.css";
@import "~dpzvc3-ui/dist/styles/utils/1px.css";
@import "~dpzvc3-ui/dist/styles/utils/animation.css";
@import "~dpzvc3-ui/dist/styles/utils/nowrap.css";

注意：按需引入组件时，如果组件依赖变量或 mixin，需要保证 base / utils 样式已引入。

六、服务组件使用

dpzvc3-ui 提供一些 服务组件，无需注册即可使用，如： • Message • Modal • Prompt • Indicator

使用示例

import { createApp } from 'vue'
import App from './components/app.vue'
import { Message, Modal, Prompt, Indicator } from 'dpzvc3-ui'

// 1️⃣ 创建 app
const app = createApp(App)

// 2️⃣ 安装你的组件库
app.use(Message)
app.use(Modal)
app.use(Prompt)
app.use(Indicator)

// 直接使用服务组件 this指向Vue实例
需要拿到vue实例
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 用于访问全局 当前vue组件实例
proxy.$Message.show('操作成功！')
proxy.$Modal.confirm({body:'这是内容',onOk:function(){})
proxy.$Prompt.info({title:'Prompt',spec:'ccc',text:'vvvv'})
proxy.$Indicator.blade()

七、目录结构（dist 打包示例）

dist/
 └── styles/
      ├── dpzvc3.css               # 全量 CSS
      ├── components/
      │     ├── button.css
      │     ├── badge.css
      │     └── ...
      ├── base/
      │     ├── reset.css
      │     ├── variables.css
      │     └── ...
      └── utils/
            ├── mixins.css
            └── ...

八、开发和调试

开发组件请放在 src/components
•	公共变量、样式放在 src/styles/base
•	工具 mixin 放在 src/styles/utils
•	组件样式放在 src/styles/components
•	Gulp 任务已支持按需打包和全量打包

九、注意事项

1.	按需引入组件时，请确保 依赖的 base / utils 样式 已引入，否则可能出现变量未定义的错误。
2.	服务组件如 Message、Modal 等无需单独注册，全局可直接使用。
3.	全量引入适合快速开发，但会增加打包体积；按需引入可减小体积，推荐生产环境使用。

⸻

现在可以开始在项目中愉快地使用 dpzvc3-ui 组件库了 🎉

十、我要支持作者

如果该项目组件库帮到了您，节省了您宝贵的开发时间，还请您不吝给项目点个免费的赞。 当然了，如果您能请作者喝杯咖啡，哪怕喝瓶娃娃哈矿泉水，也是对作者最真诚的鼓励，