npm - @bowenyao/my-component - Versions diffs - 0.0.6 - Mend

@bowenyao/my-component 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/README.md +285 -0
package/package.json +37 -0

package/README.md ADDED Viewed

@@ -0,0 +1,285 @@
+# My Component
+这是一个基于 Vue 3 + Vite 开发的可复用公共组件库。
+## ✨ 特性
+- 🎨 支持 Vue 3 Composition API
+- 📦 多种打包格式（ESM, CJS, UMD, IIFE）
+- 🎯 开箱即用的插件式安装
+- 🌐 支持通过 npm、CDN 等多种方式引入
+- 💅 支持样式独立导入
+- 🔧 基于 Vite 构建工具
+## 📦 安装
+### npm 安装
+```bash
+npm install @cery/my-component
+```
+### yarn 安装
+```bash
+yarn add @cery/my-component
+```
+### pnpm 安装
+```bash
+pnpm add @cery/my-component
+```
+## 🚀 使用方法
+### 方式一：完整安装（推荐）
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import MyComponent from '@cery/my-component'
+const app = createApp(App)
+app.use(MyComponent)
+app.mount('#app')
+```
+在模板中使用：
+```vue
+<template>
+  <MyComponent />
+</template>
+```
+### 方式二：按需引入单个组件
+```javascript
+import { MyComponent } from '@cery/my-component'
+export default {
+  components: {
+    MyComponent
+  }
+}
+```
+### 方式三：通过 CDN 使用（适用于非构建项目）
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>MyComponent Demo</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <script src="https://unpkg.com/@cery/my-component/dist/umd/index.umd.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/@cery/my-component/dist/index.css">
+</head>
+<body>
+  <div id="app">
+    <MyComponent />
+  </div>
+  <script>
+    const { createApp } = Vue
+    const { MyComponent } = window.MyComponent
+    createApp().use(MyComponent).mount('#app')
+  </script>
+</body>
+</html>
+```
+### 引入样式
+如果组件有独立样式，可以单独引入：
+```javascript
+import '@cery/my-component/dist/style'
+```
+或
+```javascript
+import '@cery/my-component/dist/index.css'
+```
+## 🏗️ 打包说明
+### 打包命令
+```bash
+# 开发模式
+pnpm dev
+# 生产构建
+pnpm build
+# 预览构建结果
+pnpm preview
+```
+### 打包配置说明
+本项目使用 Vite 进行打包，支持以下格式：
+- **ESM (ES Module)**: `dist/es/index.es.js` - 用于现代打包工具（webpack, rollup, vite）
+- **CJS (CommonJS)**: `dist/cjs/index.cjs.js` - 用于 Node.js 环境
+- **UMD**: `dist/umd/index.umd.js` - 通用格式，支持 AMD、CommonJS 和全局变量
+- **IIFE**: `dist/iife/index.iife.js` - 立即执行函数，用于浏览器直接引用
+### package.json 字段说明
+```json
+{
+  "name": "@cery/my-component",           // 包名
+  "version": "0.0.6",                     // 版本号
+  "type": "module",                       // 模块类型
+  "main": "./dist/cjs/index.cjs.js",      // CommonJS 入口
+  "module": "./dist/es/index.es.js",      // ESM 入口
+  "unpkg": "./dist/umd/index.umd.js",     // unpkg CDN 入口
+  "jsdelivr": "./dist/umd/index.umd.js",  // jsdelivr CDN 入口
+  "exports": {                            // 导出配置
+    ".": {
+      "script": "./dist/umd/index.umd.js",
+      "import": "./dist/es/index.es.js",
+      "require": "./dist/cjs/index.cjs.js"
+    },
+    "./style": "./dist/index.css"         // 样式导出
+  },
+  "files": ["dist"],                      // 发布到 npm 的文件
+  "publishConfig": {
+    "access": "public"                    // 公开包
+  }
+}
+```
+### Vite 配置关键点
+1. **多格式打包**: 通过 `lib.formats` 配置输出多种格式
+2. **外部依赖**: 将 `vue` 和 `element-plus` 标记为外部依赖，避免重复打包
+3. **静态资源复制**: 使用 `vite-plugin-static-copy` 复制 package.json 和 README.md
+4. **CSS 独立输出**: 样式文件输出到 `dist/index.css`
+## 📤 发布到 npm
+### 1. 准备工作
+确保你有 npm 账号，如果没有请先注册：
+```bash
+npm adduser
+```
+### 2. 登录 npm
+```bash
+npm login
+```
+### 3. 构建项目
+```bash
+pnpm build
+```
+### 4. 发布
+```bash
+# 正式发布
+npm publish
+# 或使用 pnpm
+pnpm publish
+```
+### 5. 更新版本号
+修改 `package.json` 中的 `version` 字段，或使用命令：
+```bash
+# 补丁版本（0.0.x）
+npm version patch
+# 次版本（0.x.0）
+npm version minor
+# 主版本（x.0.0）
+npm version major
+```
+### 6. 发布作用域包
+由于包名是 `@cery/my-component`（作用域包），确保：
+1. `publishConfig.access` 设置为 `"public"`
+2. 或者创建私有作用域：`npm publish --access restricted`
+## 📁 目录结构
+```
+my-component/
+├── src/                    # 源代码目录
+│   ├── components/         # 组件目录
+│   │   └── MyComponent.vue
+│   ├── index.js           # 入口文件
+│   ├── App.vue            # 示例应用
+│   └── main.js            # 开发入口
+├── my-component/          # 打包输出目录
+│   ├── dist/              # 构建产物
+│   │   ├── es/            # ESM 格式
+│   │   ├── cjs/           # CommonJS 格式
+│   │   ├── umd/           # UMD 格式
+│   │   ├── iife/          # IIFE 格式
+│   │   └── index.css      # 样式文件
+│   ├── package.json       # 发布用的 package.json
+│   └── README.md          # 说明文档
+├── index.html             # 开发 HTML
+├── vite.config.js         # Vite 配置文件
+├── package.json           # 项目配置
+└── README.md              # 项目说明
+```
+## 🔧 开发指南
+### 组件开发规范
+1. **入口文件** (`src/index.js`):
+```javascript
+import MyComponent from './components/MyComponent.vue'
+// 导出一个带有 install 方法的对象
+const plugin = {
+  install(app) {
+    // 注册组件名称
+    app.component('MyComponent', MyComponent)
+  }
+}
+// 支持单独导入组件
+plugin.MyComponent = MyComponent
+export default plugin
+```
+2. **组件开发**: 在 `src/components/` 目录下开发 Vue 组件
+### 添加新组件
+1. 在 `src/components/` 创建新组件
+2. 在 `src/index.js` 中注册新组件
+3. 更新 `vite.config.js` 中的 `build.lib.name`
+4. 重新构建并发布
+## 📝 注意事项
+1. **版本管理**: 遵循语义化版本规范
+2. **依赖声明**: 只在 `dependencies` 中声明运行时依赖
+3. **外部依赖**: 将 `vue`、`element-plus` 等核心库标记为外部依赖
+4. **样式隔离**: 确保组件样式不会污染全局环境
+5. **文档更新**: 每次发布更新 README.md 和版本说明
+## 📄 License
+MIT

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "@bowenyao/my-component",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "./dist/cjs/index.cjs.js",
+  "module": "./dist/es/index.es.js",
+  "unpkg": "./dist/umd/index.umd.js",
+  "jsdelivr": "./dist/umd/index.umd.js",
+  "exports": {
+    ".": {
+      "script": "./dist/umd/index.umd.js",
+      "import": "./dist/es/index.es.js",
+      "require": "./dist/cjs/index.cjs.js"
+    },
+    "./style": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.4",
+    "vite": "^7.3.1",
+    "vite-plugin-static-copy": "^3.2.0"
+  },
+  "dependencies": {
+    "element-plus": "^2.13.2",
+    "vue": "^3.5.29"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}