jl-ui

theme

集成element-ui theme-chalk主题

document

https://kuaizi-co.github.io/kuaizi-theme/#/

Install

> yarn add @kuaizi/kz-ui@next
# or 
> npm i @kuaizi/kz-ui@next -S

Dev

目录结构

▁
kz-ui
├── babel.config.js     - babel配置
├── components          - 组件目录
├── deploy.sh           - 在线文档发布
├── release.sh           - 版本发布
├── examples            - 文档目录
├── gulpfile.js         - theme构建
├── kuaizi-theme        - 在线文档build目录，同步到`kuauzi-co/kuaizi-theme`
├── lib                 - build theme样式css文件
├── package.json        - 项目配置
├── public              - 文档静态资源
├── README.md           - 说明使用文档
├── strip-tags.js       - 文档依赖函数库
├── theme               - theme预处理源文件
└── vue.config.js       - vue-cli3 构建配置文件

文档放在 examples/docs/packages目录，新建markdown 文件即可，比如：

# app.md
 
::: tip
提示
:::
 
::: warning
提醒
:::
 
::: demo 这是一个demo
```html
放代码

:::

### theme

在 `theme` 目录下的 `config/你的主题变量配置.scss`去定义变量

在 `theme` 目录新建 `theme-你的主题名称` 文件，其内容为

```scss
// theme-kz.scss
// 导入变量
@import "./config/kuaizi";
// 导入组件
@import "./config/common";

需注意一下几个文件

• theme/config/var.scss - 公用的配置文件，与颜色无关
• theme/config/mixin.scss - mixin 函数
• theme/config/common.scss - kz-ui 组件依赖样式

scss mixin函数

// $--namespace
@import "../theme-chalk/src/common/var.scss";
@import "../theme-chalk/src/mixins/mixins";

// 单线连接符
// #{$--namspace}-#${name}
// .el-button
@include b(button) {
  // 双线连接符
  // .el-button--default
  @include m(default) {

    // BEM
    // 双下划线连接符
    // .el-button--default__large
    @inclue e (large) {}
  }

  // 状态
  .el-button.is-success
  @include when (success) {}
}

编译主题需要在命令窗口启动

# 同步最新element-ui主题 
> yarn update:theme
# 开发 
> yarn theme:dev
# build 
> yarn theme:build
# 发布新版 
> git checkout dev
# 合并分支 
> git merge feature/component/tab
# 发布 
> yarn release
# 同步文档到gitpages 
> yarn deploy

组件

在 components 目录下的组件样式都统一写在 theme/components 中，组件的配色根据主题配色进行更换。

打包编译

> yarn rollup

Publish

1. npm publish --tag next 发布tag
2. npm dist-tag ls @kuaizi/kz-ui 查看tag
3. npm dist-tag add @kuaizi/kz-ui@1.0.0 latest 切换tag

---

MIT License Copyright (c) www.kuaizi.ai, 2018-preset