chalk-ui-zzl

Chalk UI

基于 Vue.js 2.0 的组件库（Element UI 定制版）。

• npm 包名：chalk-ui-zzl
• 当前版本：1.0.1
• 主题包名：chalk-theme

目录

• 作为依赖使用
• 环境要求
• 本地开发
• 启动
• 常用命令
• 打包
• 测试
• 新建组件
• 自定义主题
• 文档站点打包
• 发布
• 浏览器支持
• LICENSE

作为依赖使用

业务项目中安装并使用本组件库。

安装

npm install chalk-ui-zzl -S

或使用 yarn / pnpm：

yarn add chalk-ui-zzl
# 或
pnpm add chalk-ui-zzl

完整引入

import Vue from 'vue'
import ChalkUI from 'chalk-ui-zzl'
import 'chalk-ui-zzl/lib/theme-chalk/index.css'

Vue.use(ChalkUI)

按需引入

import Vue from 'vue'
import { Select, Button } from 'chalk-ui-zzl'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

配合 babel-plugin-component 可同时按需引入样式。安装插件后，在 .babelrc 中配置：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "chalk-ui-zzl",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

CDN

<link rel="stylesheet" href="https://unpkg.com/chalk-ui-zzl/lib/theme-chalk/index.css">
<script src="https://unpkg.com/chalk-ui-zzl/lib/index.js"></script>

建议在 CDN 地址中锁定版本，避免升级时出现不兼容变更。

环境要求

开发、打包本仓库时请满足：

克隆代码后请保证文件完整。依赖安装失败时，可改用国内镜像：

npm install --registry=https://registry.npmmirror.com

或：

make install-cn

本地开发

1. 克隆仓库

git clone <本仓库地址>
cd element-ui-custom

2. 安装依赖

npm run bootstrap

等价于 yarn || npm i。也可以直接：

npm install
# 或
make install

3. 生成入口文件

首次启动前会自动执行。如需单独生成组件入口、图标、i18n、版本信息：

npm run build:file

该命令会执行：

• build/bin/iconInit.js：生成图标列表
• build/bin/build-entry.js：根据 components.json 生成 src/index.js
• build/bin/i18n.js：处理文档多语言
• build/bin/version.js：写入版本信息

启动

文档站点（默认）

npm run dev

或：

make dev

该命令会：

1. 安装依赖（bootstrap）
2. 生成入口文件（build:file）
3. 启动 webpack-dev-server

启动成功后访问：

http://localhost:8085

服务监听 0.0.0.0:8085，局域网内其他设备也可访问。

Playground 调试页

单独调试某个组件时，可编辑 examples/play.js，然后启动：

npm run dev:play

或：

make play

主题编辑器 Chrome 插件

# 开发（watch）
npm run dev:extension

# 生产构建
npm run deploy:extension

常用命令

Makefile 快捷命令：

make install          # 安装依赖
make install-cn       # 使用国内镜像安装
make dev              # 启动开发
make play             # 启动 playground
make dist             # 安装依赖并打包
make pub              # 发布
make new button 按钮  # 新建组件
make new-lang fr      # 为文档站点添加新语言

打包

将组件库编译到 lib/，供业务项目安装或发布到 npm。

完整打包

npm run dist

或：

make dist

dist 会依次执行：

1. clean：清理旧产物
2. build:file：生成入口文件
3. lint：代码检查（有错误会中断）
4. webpack UMD 全量包（build/webpack.conf.js）
5. webpack CommonJS 包（build/webpack.common.js）
6. webpack 按需组件包（build/webpack.component.js）
7. build:utils：编译 src 工具方法到 lib
8. build:umd：编译多语言 UMD
9. build:theme：编译主题并拷贝到 lib/theme-chalk

产物目录：

lib/
  index.js                 # UMD 全量包
  chalk-ui.common.js       # CommonJS 入口（package.json main）
  theme-chalk/             # 编译后的 CSS 和字体
  ...                      # 按需组件、locale、utils

仅打包主题

修改 packages/theme-chalk/src 后，可只编译样式：

npm run build:theme

流程：生成组件 CSS 入口 → gulp 编译 SCSS → 拷贝到 lib/theme-chalk。

清理产物

npm run clean

测试

# 单次：lint + 主题 + karma 单测
npm run test

# watch 模式
npm run test:watch

打包发布前，脚本还会跑 SSR 引入测试：

node test/ssr/require.test.js

该测试依赖 lib/index.js，需要先执行 npm run dist。

新建组件

make new <component-name> [中文名]

示例：

make new foo 示例

会自动创建：

• packages/<name>/ 组件源码
• 文档 examples/docs/*/<name>.md
• 测试 test/unit/specs/<name>.spec.js
• 样式 packages/theme-chalk/src/<name>.scss
• 类型声明，并写入 components.json、样式入口等

创建后执行 npm run build:file 重新生成 src/index.js，再 npm run dev 查看效果。

自定义主题

样式源码在 packages/theme-chalk/src，全局变量在：

packages/theme-chalk/src/common/var.scss

修改变量或组件 SCSS 后：

npm run build:theme

业务项目中也可以覆盖 SCSS 变量后自行编译：

$--color-primary: teal;
$--font-path: '~chalk-ui-zzl/lib/theme-chalk/fonts';

@import '~chalk-ui-zzl/packages/theme-chalk/src/index';

独立主题包 chalk-theme 位于 packages/theme-chalk，可单独安装：

npm i chalk-theme -S

文档站点打包

将 examples 文档编译为静态站点：

npm run deploy:build

产物输出到 examples/chalk-ui/，可用于静态托管。

发布

发布前请确认：

1. 工作区干净（已提交或 stash）
2. 已登录 npm：npm whoami（未登录则 npm login）
3. package.json 中 name、version 正确
4. npm run dist 能成功产出 lib/

方式一：手动发布（推荐）

适合本仓库日常发版。npm run pub 依赖 eleme remote 和 master / dev 分支流，当前定制仓库通常不适用。

# 1. 更新版本号（三选一）
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

# 2. 打包
npm run dist

# 3. SSR 校验
node test/ssr/require.test.js

# 4. 发布主包
npm publish

# 若发布 beta
# npm publish --tag beta

同步发布主题包时：

cd packages/theme-chalk
npm version <与主包相同的版本号>
npm publish
# 或 npm publish --tag beta
cd ../..

发布后建议打 tag 并推送：

git push
git push --tags

方式二：完整发布脚本

npm run pub

或：

make pub

该命令会执行：

1. npm run bootstrap 安装依赖
2. build/git-release.sh：切到 dev，检查工作区干净、远端已同步
3. build/release.sh：
   • master 合并 dev
   • 交互选择版本号（select-version-cli）
   • npm run dist
   • SSR 测试
   • 发布 packages/theme-chalk（包名 chalk-theme）
   • 提交 [build] <version>，执行 npm version
   • 推送 eleme 的 master、tag、dev
   • 发布主包 chalk-ui-zzl（含 beta tag 判断）
4. build/bin/gen-indices.js 生成索引

注意：

• 脚本会向名为 eleme 的 git remote 推送，使用前请确认该 remote 存在，或自行改脚本
• 需要本机已 npm login，且对 chalk-ui-zzl、chalk-theme 有发布权限
• 版本号含 beta 时会使用 npm publish --tag beta

发布检查清单

• 版本号已更新（主包与 packages/theme-chalk/package.json 如需同步）
• npm run lint 通过
• npm run dist 成功，lib/ 完整
• node test/ssr/require.test.js 通过
• npm publish 成功，npm 上能搜到新版本
• git tag 已推送

浏览器支持

现代浏览器以及 Internet Explorer 10+。

LICENSE

MIT