@luoweidong/luo-component-test

v1.0.3

Published

a month ago

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

Downloads

1,359

0High
0Medium
0Low

luoweidong

luo-component-test

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

✨ 特性

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

📦 安装

npm 安装

npm install @luoweidong/luo-component-test

yarn 安装

yarn add @luoweidong/luo-component-test

pnpm 安装

pnpm add @luoweidong/luo-component-test

🚀 使用方法

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

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");

在模板中使用：

<template>
  <LuoComponentTest />
</template>

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

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

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

方式三：通过 CDN 使用（适用于非构建项目）

<!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>

引入样式

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

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

或

import "@luoweidong/luo-component-test/dist/index.css";

🏗️ 打包说明

打包命令

# 开发模式
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 字段说明

{
  "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 配置关键点

多格式打包: 通过 lib.formats 配置输出多种格式
外部依赖: 将 vue 和 element-plus 标记为外部依赖，避免重复打包
静态资源复制: 使用 vite-plugin-static-copy 复制 package.json 和 README.md
CSS 独立输出: 样式文件输出到 dist/index.css

📤 发布到 npm

1. 准备工作

确保你有 npm 账号，如果没有请先注册：

npm adduser

2. 登录 npm

npm login

3. 构建项目

pnpm build

4. 发布

# 正式发布
npm publish

# 或使用 pnpm
pnpm publish

5. 更新版本号

修改 package.json 中的 version 字段，或使用命令：

# 补丁版本（0.0.x）
npm version patch

# 次版本（0.x.0）
npm version minor

# 主版本（x.0.0）
npm version major

6. 发布作用域包

由于包名是 @cery/my-component（作用域包），确保：

publishConfig.access 设置为 "public"
或者创建私有作用域：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              # 项目说明

🔧 开发指南

组件开发规范

入口文件 (src/index.js):

import MyComponent from "./components/MyComponent.vue";

// 导出一个带有 install 方法的对象
const plugin = {
  install(app) {
    // 注册组件名称
    app.component("MyComponent", MyComponent);
  },
};

// 支持单独导入组件
plugin.MyComponent = MyComponent;

export default plugin;

组件开发: 在 src/components/ 目录下开发 Vue 组件

添加新组件

在 src/components/ 创建新组件
在 src/index.js 中注册新组件
更新 vite.config.js 中的 build.lib.name
重新构建并发布

📝 注意事项

版本管理: 遵循语义化版本规范
依赖声明: 只在 dependencies 中声明运行时依赖
外部依赖: 将 vue、element-plus 等核心库标记为外部依赖
样式隔离: 确保组件样式不会污染全局环境
文档更新: 每次发布更新 README.md 和版本说明

📄 License

MIT