build: 👷 add build config

package.json

@@ -1,18 +1,34 @@
 {
   "name": "vue-resizer",
-  "private": true,
+  "private": false,
   "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "build:dev": "vite build --mode development",
+    "build:prod": "vite build --mode production",
+    "preview": "vite preview",
+    "preview:prod": "vite preview --port 8080",
+    "clean": "rimraf dist",
+    "start": "npm run dev"
   },
   "dependencies": {
     "simple-code-editor": "^1.2.2",
     "vue": "^3.2.25"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",
-    "vite": "^2.8.0"
+    "vite": "^2.8.0",
+    "rimraf": "^3.0.2"
   }
 }

src/components/DragCol.vue

@@ -10,6 +10,7 @@
       </div>
     </div>
     <div
+      v-if="enableSlider"
       class="slider_col"
       @touchstart.passive="mobileDragCol"
       @mousedown="dragCol"
@@ -30,6 +31,10 @@
 export default {
   name: "DragCol",
   props: {
+    showSlider: {
+      type: Boolean,
+      default: true,
+    },
     leftPercent: {
       type: Number,
       default: 50,
@@ -65,6 +70,7 @@ export default {
   },
   data() {
     return {
+      enableSlider: this.showSlider,
       left: this.leftPercent,
       isDragging: false,
     };
@@ -151,6 +157,14 @@ export default {
       }
     },
   },
+  watch:{
+    showSlider(newVal){
+        this.enableSlider =newVal;
+    },
+    leftPercent(newVal){
+      this.left = newVal;
+    }
+  }
 };
 </script>
 <style>

src/components/index.js

@@ -3,10 +3,34 @@ import DragRow from "./DragRow.vue";
 import ResizeCol from "./ResizeCol.vue";
 import ResizeRow from "./ResizeRow.vue";
 import Resize from "./Resize.vue";
+
+// 导出所有组件
 export {
     DragCol,
     DragRow,
     ResizeCol,
     ResizeRow,
     Resize
-}
+};
+
+// 创建默认导出，支持 Vue 插件系统
+export default {
+    install(app) {
+        // 注册所有组件
+        const components = {
+            DragCol,
+            DragRow,
+            ResizeCol,
+            ResizeRow,
+            Resize
+        };
+
+        // 遍历组件并注册
+        Object.entries(components).forEach(([name, component]) => {
+            app.component(name, component);
+        });
+    }
+};
+
+// 组件版本信息
+export const version = '0.0.0';

vite.config.js

@@ -3,5 +3,40 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  build: {
+    // 输出目录
+    outDir: 'dist',
+    // 是否生成源映射文件
+    sourcemap: false,
+    // 指定压缩方式
+    minify: 'terser',
+    // 警告的分块大小限制（KB）
+    chunkSizeWarningLimit: 1000,
+    // Terser 压缩选项
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true
+      }
+    },
+    // 库模式构建
+    lib: {
+      entry: './src/components/index.js',
+      name: 'VueResizer',
+      formats: ['es', 'umd'],
+      fileName: (format) => format === 'es' ? 'index.es.js' : 'index.umd.js'
+    },
+    // Rollup 配置
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external: ['vue'],
+      output: {
+        // 在 UMD 模式下为这些外部依赖提供一个全局变量
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
 })