iss-comp-vue2

Vue2 组件库，支持全局引用和按需引用。

环境准备

pnpm install

打包

将组件库编译输出到 dist/ 目录，生成 CommonJS、UMD 等格式：

pnpm run build:lib

输出文件：

• dist/iss-comp-vue2.common.js - CommonJS
• dist/iss-comp-vue2.umd.js - UMD
• dist/iss-comp-vue2.umd.min.js - UMD 压缩版
• dist/iss-comp-vue2.css - 样式文件

本地调试

流程说明

本地调试用于在开发阶段预览组件效果，通过 Vue CLI 开发服务器热重载，实时查看组件修改结果。

操作步骤

1. 安装依赖（首次或依赖变更后执行）

   pnpm install

2. 启动开发服务器

   pnpm run serve
   # 或
   pnpm run dev

3. 访问页面

   • 浏览器打开 http://localhost:8080/
   • 默认跳转到 /input，展示 IInput 组件示例

4. 调试交互

   • 左侧：组件菜单，点击切换不同组件示例
   • 右侧：当前组件的全特性演示（Props、插槽、事件等）
   • 修改 src/ 下代码后自动热更新

5. 停止调试

   • 在运行 serve 的终端中按 Ctrl + C

本地调试流程图

flowchart TD
    A[开始] --> B[执行 pnpm install]
    B --> C{依赖安装成功?}
    C -->|否| D[检查网络/镜像配置]
    D --> B
    C -->|是| E[执行 pnpm run serve]
    E --> F[Vue CLI 启动 webpack-dev-server]
    F --> G[编译项目]
    G --> H[监听文件变化]
    H --> I[打开浏览器访问 localhost:8080]
    I --> J[查看组件示例页面]
    J --> K{修改代码?}
    K -->|是| L[热更新生效]
    L --> J
    K -->|否| M{继续调试?}
    M -->|是| J
    M -->|否| N[Ctrl+C 停止服务]
    N --> O[结束]

编译发布

发布到 NPM

发布前请先登录：npm login

pnpm run publish:npm

该命令会先执行 build:lib 打包，再执行 npm publish。包版本从 package.json 的 version 字段读取。

发布到 yalc（本地联调）

适用于在本地项目中联调组件库。

# 首次使用需安装 yalc
pnpm add -g yalc

# 发布到本地 yalc 仓库
pnpm run publish:yalc

在目标项目中执行 yalc add iss-comp-vue2 引入本地包。

其他命令

# 应用构建（非组件库模式）
pnpm run build

# 代码检查
pnpm run lint

使用方式

注意： IInput 基于 TDesign t-input，使用前需安装 @vue/composition-api（Vue 2 项目）并执行 Vue.use(VueCompositionAPI)。

全局引用：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import IssCompVue2 from 'iss-comp-vue2'
import 'iss-comp-vue2/dist/iss-comp-vue2.css'

Vue.use(VueCompositionAPI)
Vue.use(IssCompVue2)

按需引用：

import { IInput } from 'iss-comp-vue2'
import 'iss-comp-vue2/dist/iss-comp-vue2.css'
Vue.use(IInput)

<i-input v-model="value" placeholder="请输入" />

配置说明

参见 Vue CLI 配置参考。