@swj_ld/ld-component-library 1.1.0 → 1.1.2

package/README.md

@@ -2,17 +2,21 @@
 
 > 一套专为 **uni-app** 打造的轻量级 Vue 3 组件库，支持 **H5、微信小程序、支付宝小程序等全平台**，开箱即用。
 
-[![](https://img.shields.io/npm/v/@swj_ld/ld-component-library?color=green)](https://www.npmjs.com/package/@swj_ld/ld-component-library)
-[![](https://img.shields.io/npm/l/@swj_ld/ld-component-library)](LICENSE)
-[![](https://img.shields.io/bundlephobia/minzip/@swj_ld/ld-component-library?label=minzipped)](https://bundlephobia.com/result?p=@swj_ld/ld-component-library)
+[![npm version](https://img.shields.io/npm/v/@swj_ld/ld-component-library?color=green)](https://www.npmjs.com/package/@swj_ld/ld-component-library)
+[![license](https://img.shields.io/npm/l/@swj_ld/ld-component-library)](LICENSE)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/@swj_ld/ld-component-library?label=minzipped)](https://bundlephobia.com/result?p=@swj_ld/ld-component-library)
 
 ## ✨ 特性
 
-- ✅ **uni-app 原生兼容**：所有组件使用 `<view>`、`<text>` 等标准标签，无 DOM 操作
-- ✅ **多端一致**：H5 / 微信小程序 / 支付宝小程序 渲染效果一致
-- ✅ **按需引入**：支持 Tree-shaking，不增加无用代码
-- ✅ **TypeScript 友好**：自带类型提示，开发体验流畅
-- ✅ **零构建依赖**：发布源码（`.vue`），由用户项目编译，避免兼容问题
+- ✅ **uni-app 原生兼容**：所有组件使用 `<view>`、`<text>` 等标准标签，无 DOM/BOM 操作  
+- ✅ **多端一致**：H5 / 微信小程序 / 支付宝小程序 渲染效果一致  
+- ✅ **源码发布**：以 `.vue` 源文件形式发布，由用户项目编译，避免打包兼容问题  
+- ✅ **TypeScript 友好**：自带类型提示，开发体验流畅  
+- ✅ **按需使用**：每个组件独立引入，天然支持 Tree-shaking  
+
+> ⚠️ **注意**：本组件库 **不提供预编译的 JS 包**，请勿尝试 `app.use()` 或解构式按需引入（如 `import { SwjEmpty } from '...'`），这些方式在 uni-app 小程序中 **无法渲染组件**。
+
+---
 
 ## 📦 安装
 
@@ -21,42 +25,39 @@ npm install @swj_ld/ld-component-library
 # 或
 yarn add @swj_ld/ld-component-library
 
+🚀 使用方式（推荐）
+✅ 方式一：直接引入 .vue 文件（最稳定，全平台支持）
 
-本组件库采用 源码发布模式：
-
-所有组件以 .vue 源文件形式发布
-不经过任何打包或编译
-由用户的 uni-app 项目负责最终编译为各端代码
-因此，请确保：
-
-用户项目使用 Vite + Vue 3 + uni-app v3+
-不要对组件进行二次包装（否则可能导致小程序白屏）
-
-
-
-🚀 使用方式
-方式一：按需引入（推荐）——已测-正常
 <template>
   <SwjEmpty description="暂无数据" />
 </template>
 
 <script setup lang="ts">
+// 注意：直接指定到 .vue 文件路径
 import SwjEmpty from '@swj_ld/ld-component-library/SwjEmpty'
 </script>
 
-方式二：整体引入——已测-非正常
-import { SwjEmpty, SwjButton } from '@swj_ld/ld-component-library'
-
-方式三：全局注册（适合大量使用）——目前用file本地link的方式无法正常加载
-// main.ts 或 main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-import LdComponentLibrary from '@swj_ld/ld-component-library'
-
-const app = createApp(App)
-app.use(LdComponentLibrary) // 自动注册所有组件
-app.mount('#app')
+✅ 方式二：配置 easycom（自动按需，无需 import）
+在项目根目录的 pages.json 中添加以下配置：
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      '^Swj(.*)$': '@swj_ld/ld-component-library/Swj$1'
+    }
+  },
+  "pages": [
+    // ...你的页面配置
+  ]
+}
 
 <template>
-  <SwjEmpty />
+  <view>
+    <SwjEmpty />
+    <SwjButton type="primary">确定</SwjButton>
+  </view>
 </template>
+
+<script setup>
+// ✅ 无需任何 import！
+</script>

package/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@swj_ld/ld-component-library",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A set of custom components for uni-app",
+  "keywords": ["uni-app", "vue3", "components"],
   "author": "Joy",
   "license": "MIT",
-  "keywords": ["uni-app", "vue3", "components"],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
-    "./SwjEmpty": "./src/components/SwjEmpty/SwjEmpty.vue"
+    "./SwjEmpty": "./src/components/SwjEmpty/SwjEmpty.vue",
+    "./SwjButton": "./src/components/SwjButton/SwjButton.vue"
   },
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
   "files": [
+    "src",
     "assets",
-    "src"
+    "dist"
   ],
-  "peerDependencies": {
-    "@dcloudio/uni-app": "3.0.0-4070620250821001",
+   "peerDependencies": {
     "sard-uniapp": "^1.25.2",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "@dcloudio/uni-app": "3.0.0-4070620250821001"
   },
   "peerDependenciesMeta": {
     "sard-uniapp": {
@@ -32,4 +34,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/SwjButton/SwjButton.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineOptions({ name: 'SwjButton' })
+</script>
+
+<template>
+  <button class="swj-button">按钮</button>
+</template>
+
+<style lang="scss" scoped>
+  .swj-button{
+    color:#f00;
+  }
+</style>

package/src/components/SwjEmpty/SwjEmpty.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import nodataImage from '../../../assets/images/nodata.png'
+defineOptions({ name: 'SwjEmpty' })
 interface Props {
   description?: string
   top?: string
@@ -23,7 +25,7 @@ withDefaults(defineProps<Props>(), {
       }"
     >
       <template #icon>
-        <image src="../../../../assets/images/nodata.png" class="image-box" />
+        <image :src="nodataImage" class="image-box" />
       </template>
       <template #default>
         <slot />

package/src/index.ts

@@ -1,17 +1,15 @@
-export { default as SwjEmpty } from './components/SwjEmpty/SwjEmpty.vue'
-// 可选：提供插件形式（用于 app.use()）
+// 引入所有组件
 import SwjEmpty from './components/SwjEmpty/SwjEmpty.vue'
-
-const getComponent = (comp: any) => comp.default || comp
-
-const components = {
-  SwjEmpty: getComponent(SwjEmpty),
+import SwjButton from './components/SwjButton/SwjButton.vue'
+// 组件列表用于全局注册
+const components = [SwjEmpty, SwjButton]
+// 全局注册的install方法，vue3的app use需要这个
+const install = (app: any) => {
+  components.forEach((component: any) => {
+    app.component(component.name, component)
+  })
 }
-
-export default {
-  install(app: any) {
-    for (const [name, component] of Object.entries(components)) {
-      app.component(name, component)
-    }
-  }
-}
+// 命名导出，支持按需解构引入
+export { SwjEmpty, SwjButton }
+// 默认导出，支持全局注册app.use
+export default {install}