dpzvc-ui 1.0.0 → 1.2.0

package/README.md

@@ -2,45 +2,129 @@
 
 ## 一、说明
 
-> 一套基于Vue 2.0的通用组件库。
+> 一套基于 **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,27 +1,23 @@
-// var gulp = require('gulp');
-// var cleanCSS = require('gulp-clean-css');
-// var postCss = require('gulp-postcss')
-// var less = require('gulp-less');
-// var rename = require('gulp-rename');
-// var autoprefixer = require('gulp-autoprefixer');
-
-// // 编译less
-// gulp.task('css', function () {
-//     gulp.src('./src/styles/index.less')
-//         .pipe(less())
-//         .pipe(autoprefixer())
-//         .pipe(cleanCSS({compatibility: 'ie8'}))
-//         .pipe(rename('dpzvc.css'))
-//         .pipe(gulp.dest('./dist/styles'));
-// });
-
-// // 拷贝字体文件
-// // gulp.task('fonts', function () {
-// //     gulp.src('../src/styles/common/iconfont/fonts/*.*')
-// //         .pipe(gulp.dest('../dist/styles/fonts'));
-// // });
-
-// gulp.task('default', ['css']);
+// 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');
@@ -29,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);