npm package: @luoweidong/luo-component-test
Description: 这是一个基于 Vue 3 + Vite 开发的可复用公共组件库。
Latest version: 1.0.3

# luo-component-test

这是一个基于 Vue 3 + Vite 开发的可复用公共组件库。

## ✨ 特性

- 🎨 支持 Vue 3 Composition API
- 📦 多种打包格式（ESM, CJS, UMD, IIFE）
- 🎯 开箱即用的插件式安装
- 🌐 支持通过 npm、CDN 等多种方式引入
- 💅 支持样式独立导入
- 🔧 基于 Vite 构建工具

## 📦 安装

### npm 安装

```bash
npm install @luoweidong/luo-component-test
```

### yarn 安装

```bash
yarn add @luoweidong/luo-component-test
```

### pnpm 安装

```bash
pnpm add @luoweidong/luo-component-test
```

## 🚀 使用方法

### 方式一：完整安装（推荐）

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import LuoComponentTest from "@luoweidong/luo-component-test";

const app = createApp(App);
app.use(LuoComponentTest);
app.mount("#app");
```

在模板中使用：

```vue
<template>
  <LuoComponentTest />
</template>
```

### 方式二：按需引入单个组件

```javascript
import { LuoComponentTest } from "@luoweidong/luo-component-test";

export default {
  components: {
    LuoComponentTest,
  },
};
```

### 方式三：通过 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/@luoweidong/luo-component-test/dist/umd/index.umd.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@luoweidong/luo-component-test/dist/index.css"
    />
  </head>
  <body>
    <div id="app">
      <LuoComponentTest />
    </div>
    <script>
      const { createApp } = Vue;
      const { LuoComponentTest } = window.LuoComponentTest;

      createApp().use(LuoComponentTest).mount("#app");
    </script>
  </body>
</html>
```

### 引入样式

如果组件有独立样式，可以单独引入：

```javascript
import "@luoweidong/luo-component-test/dist/style";
```

或

```javascript
import "@luoweidong/luo-component-test/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": "@luoweidong/luo-component-test", // 包名
  "version": "0.0.1", // 版本号
  "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