dpzvc-ui 1.1.0 → 1.2.0

package/README.md

@@ -2,45 +2,129 @@
 
 ## 一、说明
 
-> 一套基于Vue 2.X的通用组件库。
+> 一套基于 **Vue 2.X** 的通用组件库，提供丰富 UI 组件，并支持 **全量引入** 和 **按需引入**，同时提供公共样式、基础工具样式和服务组件方法（如 Message、Modal、Indicator）。
 
+---
 
 ## 二、安装
 
-> 执行以下命令，在你的项目中引入组件库
-```
-    npm install dpzvc-ui
+```bash
+npm install dpzvc-ui
+
 ```
+---
 
-> 引入之后，在你项目的入口通过import引入组件库
 
-```
+## 三、全量使用
+
+
+全量引入组件库，包括 JS 组件和全量 CSS 样式（适合小型项目或快速开发）。
+
+1. 引入组件库 JS
+
+```bash
 import Vue from 'vue'
-import dpzvcui from 'dpzvc-ui'
+import Dpzvc from 'dpzvc-ui'
+
+Vue.use(Dpzvc)
+```
 
-Vue.use(dpzvcui)
+2. 引入全量样式
 
+/* 在入口文件或全局样式中引入 */
+```bash
+@import "~dpzvc-ui/dist/styles/dpzvc.css";
 ```
 
+此方式会包含 components、base、utils 下的全部样式。
+---
 
-> 在你项目的入口vue文件中引入组件库样式
+## 四、按需使用
 
+按需引入可以减小打包体积，只引入你需要的组件及样式。
 
+1. 引入组件
+```bash
+import Vue from 'vue'
+import { VButton, VBadge } from 'dpzvc-ui'
+
+Vue.component('VButton', VButton)
+Vue.component('VBadge', VBadge)
+```
+
+2. 引入组件 CSS
+```bash
+@import "~dpzvc-ui/dist/styles/components/button.css";
+@import "~dpzvc-ui/dist/styles/components/badge.css";
 ```
-// example in app.vue
+3. 公共样式按需引入（可选）
+```bash
+@import "~dpzvc-ui/dist/styles/base/variables.css";
+@import "~dpzvc-ui/dist/styles/base/reset.css";
+@import "~dpzvc-ui/dist/styles/utils/mixins.css";
+```
+注意：按需引入组件时，如果组件依赖变量或 mixin，需要保证 base / utils 样式已引入。
 
-<template>
-    // 省略部分html代码
-</template>
+---
 
-<style>
+## 五、服务组件使用
 
-    @import "~dpzvc-ui/dist/styles/dpzvc.css"
-</style>
+dpzvc-ui 提供一些 服务组件，无需注册即可使用，如：
+	•	Message
+	•	Modal
+	•	Prompt
+	•	Indicator
 
-```
+使用示例    
+```bash
+import Vue from 'vue'
+import Dpzvc from 'dpzvc-ui'
 
-> 现在可以开始组件库的使用了。
+Vue.use(Dpzvc)
 
+// 直接使用服务组件
+Vue.prototype.$Message.success('操作成功！')
+Vue.prototype.$Modal.alert('提示信息')
+Vue.prototype.$Prompt('请输入内容')
+Vue.prototype.$Indicator.show()   
 
+```
 
+---
+
+## 六、目录结构（dist 打包示例）
+```bash
+dist/
+ └── styles/
+      ├── dpzvc.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.	全量引入适合快速开发，但会增加打包体积；按需引入可减小体积，推荐生产环境使用。
+
+⸻
+
+现在可以开始在项目中愉快地使用 dpzvc-ui 组件库了 🎉
+---

package/build-style.js

@@ -1,3 +1,23 @@
+// const gulp = require('gulp');
+// const less = require('gulp-less');
+// const cleanCSS = require('gulp-clean-css');
+// const rename = require('gulp-rename');
+// const postcss = require('gulp-postcss');
+// const autoprefixer = require('autoprefixer');
+
+// function css() {
+//   return gulp.src('./src/styles/index.less')
+//     .pipe(less())                   // 编译 less
+//     .pipe(postcss([autoprefixer()])) // 添加前缀
+//     .pipe(cleanCSS({ compatibility: 'ie8' })) // 压缩
+//     .pipe(rename('dpzvc.css'))
+//     .pipe(gulp.dest('./dist/styles'));
+// }
+
+// // 默认任务
+// exports.default = css;
+
+
 const gulp = require('gulp');
 const less = require('gulp-less');
 const cleanCSS = require('gulp-clean-css');
@@ -5,14 +25,45 @@ const rename = require('gulp-rename');
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 
-function css() {
+// 打包组件 CSS
+function componentsCSS() {
+  return gulp.src('./src/styles/components/*.less')
+    .pipe(less())
+    .pipe(postcss([autoprefixer()]))
+    .pipe(cleanCSS({ compatibility: 'ie8' }))
+    .pipe(rename({ dirname: '', extname: '.css' }))
+    .pipe(gulp.dest('./dist/styles/components'));
+}
+
+// 打包 base CSS
+function baseCSS() {
+  return gulp.src('./src/styles/base/*.less')
+    .pipe(less())
+    .pipe(postcss([autoprefixer()]))
+    .pipe(cleanCSS({ compatibility: 'ie8' }))
+    .pipe(rename({ dirname: '', extname: '.css' }))
+    .pipe(gulp.dest('./dist/styles/base'));
+}
+
+// 打包 utils CSS
+function utilsCSS() {
+  return gulp.src('./src/styles/utils/*.less')
+    .pipe(less())
+    .pipe(postcss([autoprefixer()]))
+    .pipe(cleanCSS({ compatibility: 'ie8' }))
+    .pipe(rename({ dirname: '', extname: '.css' }))
+    .pipe(gulp.dest('./dist/styles/utils'));
+}
+
+// 打包全局 index.less
+function globalCSS() {
   return gulp.src('./src/styles/index.less')
-    .pipe(less())                   // 编译 less
-    .pipe(postcss([autoprefixer()])) // 添加前缀
-    .pipe(cleanCSS({ compatibility: 'ie8' })) // 压缩
+    .pipe(less())
+    .pipe(postcss([autoprefixer()]))
+    .pipe(cleanCSS({ compatibility: 'ie8' }))
     .pipe(rename('dpzvc.css'))
     .pipe(gulp.dest('./dist/styles'));
 }
 
 // 默认任务
-exports.default = css;
+exports.default = gulp.parallel(globalCSS, componentsCSS, baseCSS, utilsCSS);

package/dist/dpzvc.js

@@ -5959,6 +5959,32 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
+  ActionSheet: () => (/* reexport */ action_sheet),
+  Badge: () => (/* reexport */ components_badge),
+  Card: () => (/* reexport */ components_card),
+  Cell: () => (/* reexport */ components_cell),
+  CellSwipe: () => (/* reexport */ components_cell_swipe),
+  CheckBox: () => (/* reexport */ checkBox),
+  Header: () => (/* reexport */ Header),
+  Indicator: () => (/* reexport */ components_Indicator),
+  LoadMore: () => (/* reexport */ loadMore),
+  Message: () => (/* reexport */ components_message),
+  Modal: () => (/* reexport */ modal),
+  Picker: () => (/* reexport */ components_picker),
+  Popup: () => (/* reexport */ components_popup),
+  Progress: () => (/* reexport */ components_progress),
+  Prompt: () => (/* reexport */ components_prompt),
+  Radio: () => (/* reexport */ radioBox),
+  Rater: () => (/* reexport */ components_rater),
+  SlideBar: () => (/* reexport */ components_slideBar),
+  Spinner: () => (/* reexport */ components_spinner),
+  Swipe: () => (/* reexport */ components_swipe),
+  SwitchBar: () => (/* reexport */ components_switchbar),
+  Tab: () => (/* reexport */ components_tab),
+  TextBar: () => (/* reexport */ Text),
+  ToTop: () => (/* reexport */ toTop),
+  Upload: () => (/* reexport */ components_upload),
+  VButton: () => (/* reexport */ components_button),
   "default": () => (/* binding */ src)
 });
 
@@ -13429,9 +13455,13 @@ var card_component = normalizeComponent(
 /* harmony default export */ const components_card = (card);
 ;// ./src/index.js
 /**
- * Created by admin on 2017/5/15.
+ * Created by admin on 2025/12/15.
  */
 
+/* ========= 组件引入（保持你原有结构） ========= */
+
+
+
 
 
 
@@ -13457,17 +13487,15 @@ var card_component = normalizeComponent(
 
 
 
+/* ========= 组件集合（用于全量注册） ========= */
 
-var dpzvc = {
+var components = {
   VButton: components_button,
   CheckBox: checkBox,
   CheckBoxGroup: checkBox.group,
   Radio: radioBox,
   RadioGroup: radioBox.group,
   DpHeader: Header,
-  Message: components_message,
-  Modal: modal,
-  Prompt: components_prompt,
   Picker: components_picker,
   Swipe: components_swipe,
   Tab: components_tab,
@@ -13481,7 +13509,6 @@ var dpzvc = {
   Spinner: components_spinner,
   LoadMore: loadMore,
   Popup: components_popup,
-  Indicator: components_Indicator,
   DpProgress: components_progress,
   ToTop: toTop,
   Cell: components_cell,
@@ -13489,22 +13516,64 @@ var dpzvc = {
   Badge: components_badge,
   Card: components_card
 };
-var install = function install(Vue, options) {
-  Object.keys(dpzvc).forEach(function (key) {
-    Vue.component(key, dpzvc[key]);
+
+/* ========= 服务组件 ========= */
+
+var services = {
+  Message: components_message,
+  Modal: modal,
+  Prompt: components_prompt,
+  Indicator: components_Indicator
+};
+
+/* ========= 给“单个组件”补 install（关键） ========= */
+
+Object.keys(components).forEach(function (key) {
+  var component = components[key];
+  if (!component.install) {
+    component.install = function (Vue) {
+      Vue.component(key, component);
+    };
+  }
+});
+Object.keys(services).forEach(function (key) {
+  var service = services[key];
+  if (!service.install) {
+    service.install = function (Vue) {
+      Vue.prototype["$".concat(key)] = service;
+    };
+  }
+});
+
+/* ========= 全量 install ========= */
+
+var _install = function install(Vue) {
+  if (_install.installed) return;
+  _install.installed = true;
+
+  // 注册组件
+  Object.keys(components).forEach(function (key) {
+    Vue.component(key, components[key]);
+  });
+
+  // 注册服务
+  Object.keys(services).forEach(function (key) {
+    Vue.prototype["$".concat(key)] = services[key];
   });
-  Vue.prototype.$Message = components_message;
-  Vue.prototype.$Modal = modal;
-  Vue.prototype.$Prompt = components_prompt;
-  Vue.prototype.$Indicator = components_Indicator;
 };
+
+/* ========= 自动安装（script 方式） ========= */
+
 if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
+  _install(window.Vue);
 }
-var exportObj = Object.assign(dpzvc, {
-  install: install
+
+/* ========= 按需导出 + 默认导出 ========= */
+
+
+/* harmony default export */ const src = ({
+  install: _install
 });
-/* harmony default export */ const src = (exportObj);
 })();
 
 /******/ 	return __webpack_exports__;