lkl-components

一个基于 Vue2 + Vite 的公共组件库，目前包含基础组件：Button、Input。

特性

• Vue2 + Vite 构建（使用 @vitejs/plugin-vue2）
• 支持按需导出：import { Button } from 'lkl-components'
• 支持整库一次性注册：Vue.use(LklComponents) 或默认导出对象的 install
• ESM + CJS 双格式输出（dist/index.es.js / dist/index.cjs.js）
• 全局样式入口：src/styles/index.scss

当前目录结构（节选）

src/
  components/
    Button/
      Button.vue
      index.js
    Input/
      Input.vue
      index.js
  index.js        # 组件库入口（聚合 install + 按需导出）
  styles/
    index.scss

安装与开发

npm install
npm run dev

构建

npm run build

使用方式

1. 全量注册（整库）

import Vue from "vue";
import LklComponents from "lkl-components";
Vue.use(LklComponents); // 自动注册 Button、Input 等所有组件

或使用命名插件（如果你改为 named 导出聚合插件）：

import { LklComponents } from "lkl-components";
Vue.use(LklComponents);

2. 按需引入单个组件

import { Button, Input } from "lkl-components";
Vue.component("LklButton", Button);
Vue.component("LklInput", Input);
// 或者：Vue.use(Button); Vue.use(Input); （因为每个组件 index.js 内都有 install）

3. 单组件插件对象（可选）

import { LklButtonPlugin, LklInputPlugin } from "lkl-components";
Vue.use(LklButtonPlugin);
Vue.use(LklInputPlugin);

4. 在模板中使用

<template>
  <div>
    <LklButton type="primary" @click="onSave">保存</LklButton>
    <LklInput v-model="keyword" placeholder="请输入关键字" />
  </div>
</template>

<script>
export default {
  data() {
    return { keyword: "" };
  },
  methods: {
    onSave() {
      console.log("save");
    },
  },
};
</script>

5. 事件与双向绑定

Input 组件支持：v-model="value"（内部触发 update:modelValue）。

Button 组件触发：@click，禁用状态（disabled）下不会触发。

6. API 一览

| 组件 | Props | 说明 | | ------ | ----------------------------------------------------- | -------------------------------- | | Button | type (primary/secondary)，disabled | 按钮类型与禁用 | | Input | modelValue，placeholder，disabled，nativeType | 输入框内容、占位、禁用、原生类型 |

事件：

• Button: click
• Input: update:modelValue、input、change、focus、blur

7. 版本号获取

可通过：

import LklComponents from "lkl-components";
console.log(LklComponents.version); // 若入口保持 version 导出

或直接查看 package.json 中的 version。

8. Tree-shaking 提示

按需方式 import { Button } 能让打包器更好地尝试移除未使用组件，但需：

• 使用者项目配置正确（生产模式 + 无副作用引入）
• 组件内部避免无条件执行的副作用代码

9. 后续规划

• 更多基础组件（Modal、Select、Message 等）
• 单元测试（Vitest）
• 文档站点（VuePress 或 VitePress）
• 自动注入构建版本（使用 define 注入 __VERSION__）
• 按需样式拆分（避免一次性加载全部样式）

10. 发布指南

发布指南

以下步骤用于将组件库发布到 npm：

1. 环境与账号准备

• 确保已注册 npm 账号：https://www.npmjs.com/
• 本地登录：

npm login

2. 版本管理

• 遵循 SemVer（主版本.次版本.补丁）：MAJOR.MINOR.PATCH
• 修改 package.json 中的 version 或使用命令：

npm version patch   # 小修复
npm version minor   # 新功能，向下兼容
npm version major   # 破坏性变更

命令会自动创建 git tag（若仓库已初始化 git）。

3. 构建产物

npm run build

确保生成的 dist/ 目录包含 index.cjs.js 与 index.esm.js。

4. 发布到 npm

npm publish --access public

（若包名未加作用域且非私有，默认即为 public）

5. 验证安装

可以在空目录快速验证：

mkdir test-install; cd test-install
npm init -y
npm install lkl-components

编写简单使用：

import "lkl-components/style.css"; // 样式引入（自 v0.2.x 起支持 exports 子路径）
import { Button } from "lkl-components";
Vue.component("LklButton", Button);

6. 样式引入说明

组件库构建后会生成 dist/style.css。由于 package.json 使用了 exports 字段，不能直接深度导入 lkl-components/dist/style.css（会报 package path not exported）。已在 exports 中添加：

"exports": {
  ".": { "import": "./dist/index.es.js", "require": "./dist/index.cjs.js" },
  "./style.css": { "import": "./dist/style.css", "require": "./dist/style.css" },
  "./dist/style.css": "./dist/style.css"
}

推荐的样式导入方式：

import "lkl-components/style.css";
// 或者（保持向后兼容）
import "lkl-components/dist/style.css";

如果按钮样式未生效请检查：

1. 是否使用了最新版本（重新安装后查看 node_modules/lkl-components/dist/style.css 是否包含 .lkl-btn）
2. DOM 上是否有作用域属性（若仍使用 <style scoped> 则渲染的按钮包含 data-v-xxxx）
3. 是否被其他全局 Reset 样式覆盖（打开 DevTools 查看计算后的样式层叠）
4. 没有对源码路径进行二次编译导致 scopeId 丢失 import { Button } from "lkl-components";

### 6. 常见问题

- 403 Forbidden：检查是否登录、包名是否占用、是否有发布权限。
- 版本已存在：更新版本号后重新发布。
- 构建为空：确认 `build` 脚本正确、依赖安装完成。执行 `npm ci` 再试。
- 私有包需要：`npm publish --access public`（首次作用域包必须加）。

### 7. 建议的后续自动化

- 使用 CHANGELOG（推荐 `changesets` 或 `conventional-changelog`）。
- GitHub Actions 自动发布：push tag 后触发工作流执行 `npm publish`。
- 加入单元测试与 CI 校验（构建、lint、test 全通过才发布）。

### 8. 回滚策略

如误发布：

```powershell
npm unpublish [email protected] --force

注意：15 分钟后无法强制 unpublish，需发布新版本修正。

发布完成后，可在：

npm info lkl-components

查看元数据确认是否正确。

欢迎提交 Issue 或 PR 来扩展组件。若需示例或新增脚手架支持（如自动生成组件模板），可在仓库中添加脚本：npm run gen:component。