@smart-ai/components-vue2

Smart AI Table and Dialog components for Vue 2

✨ 特性

• ✅ 完全兼容 Vue 2：支持 Vue 2.6+ 和 Vue 2.7
• ✅ 兼容 Node 16+：构建产物可在任何 Node 版本的项目中使用
• ✅ TypeScript 支持：提供完整的类型定义
• ✅ 双格式支持：同时提供 ES 模块和 CommonJS 格式
• ✅ 零依赖打包：Vue 和 Element UI 作为 peerDependencies
• ✅ 无需 webpack 配置：支持注入自定义 HTTP 实例，完全避免 webpack 配置问题

📋 兼容性

运行环境要求

• Node.js: 16+ （用于安装和使用，不限制构建环境）
• Vue: 2.6.14+ 或 2.7.x
• Element UI: 2.15.0+

构建环境要求

• Node.js: 18+ （仅构建时需要，使用方不受影响）
• 构建工具: Vite 5.x

💡 重要说明：虽然构建时使用 Node 20，但构建后的包可以在 Node 16 的项目中正常使用。构建工具和构建环境不影响使用方。

详细兼容性说明请查看 COMPATIBILITY.md

安装

方式一：使用 npm（推荐）

如果包发布到私有 npm 仓库，需要先配置 registry：

1. 配置私有仓库（在项目根目录创建 .npmrc 文件）：

# 将 @smart-ai scope 的包指向私有仓库
@smart-ai:registry=http://10.1.6.38:9081/repository/npm_aspire/

# 如果需要认证，添加认证信息
# //10.1.6.38:9081/repository/npm_aspire/:_authToken=your-token-here

2. 安装包：

npm install @smart-ai/components-vue2

方式二：使用 cnpm

如果使用 cnpm，需要配置 .cnpmrc 文件：

1. 在项目根目录创建 .cnpmrc 文件：

# 将 @smart-ai scope 的包指向私有仓库
@smart-ai:registry=http://10.1.6.38:9081/repository/npm_aspire/

# 如果需要认证
# //10.1.6.38:9081/repository/npm_aspire/:_authToken=your-token-here

2. 安装包：

cnpm install @smart-ai/components-vue2

⚠️ 注意：如果使用 cnpm，确保 .cnpmrc 配置正确，否则 cnpm 会尝试从淘宝镜像获取包，导致 404 错误。

方式三：使用 pnpm 或 yarn

pnpm：

# 配置 .npmrc（pnpm 使用相同的配置文件）
# @smart-ai:registry=http://10.1.6.38:9081/repository/npm_aspire/

pnpm add @smart-ai/components-vue2

yarn：

# 配置 .yarnrc 或 .npmrc
# @smart-ai:registry=http://10.1.6.38:9081/repository/npm_aspire/

yarn add @smart-ai/components-vue2

使用

1. 安装依赖

# 安装组件库
npm install @smart-ai/components-vue2

# 安装 peer dependencies（如果还没有安装）
npm install vue@^2.7.14 element-ui@^2.15.14 axios@^1.13.2

💡 提示：如果你的项目中已经有 axios，直接使用即可，无需重新安装。

2. 在项目中使用

组件库已内置 axios，无需额外配置，直接使用即可（与 Vue 3 版本一致）：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import SmartAiComponents from '@smart-ai/components-vue2'
import '@smart-ai/components-vue2/style'

Vue.use(ElementUI)
Vue.use(SmartAiComponents, {
  requestHooks: {
    getCustomHeaders: () => ({
      token: localStorage.getItem('token') || '',
    }),
  },
  table: {
    theme: 'webbas',
  },
})

✅ 说明：

• 组件库已内置 axios 1.x（axios 已打包进组件库），使用方项目无需安装 axios，也无需任何 webpack 配置
• 组件库完全独立，可以直接使用，无需额外配置

构建

# 进入 packages 目录
cd src/packages

# 安装依赖
npm install

# 构建
npm run build

发布到 npm

# 进入 packages 目录
cd src/packages

# 登录 npm
npm login

# 发布
npm publish

版本管理

发布新版本前，请更新 package.json 中的版本号：

npm version patch  # 补丁版本 1.0.0 -> 1.0.1
npm version minor  # 次要版本 1.0.0 -> 1.1.0
npm version major  # 主要版本 1.0.0 -> 2.0.0