2.13.33 • Published 4 years ago
jl-ui v2.13.33
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
npm publish --tag next
发布tagnpm dist-tag ls @kuaizi/kz-ui
查看tagnpm dist-tag add @kuaizi/kz-ui@1.0.0
latest 切换tag
MIT License Copyright (c) www.kuaizi.ai, 2018-preset