zent-kit
初始化项目时的模版,请配合zent-kit使用。
注意: 不要单独使用,这是react-nymph
!!! 请在此处填写你的文档最简单描述 !!!
使用场景
简单介绍组件使用场景
代码演示
请写在本段落
API
参数 | 说明 | 类型 | 默认值 | 备选值 |
---|---|---|---|---|
className | 自定义额外类名 | string | '' | '' |
prefix | 自定义前缀 | string | 'zent' | null |
react-nymph
组件
欢迎使用zent-kit来初始化你的接下来就可以愉快的开发了~
注意:
请遵循上面的段落规范进行开发 本部分和以下部分为文档,正式发布前请删除
zent-kit
组件库开发脚手架
Install
npm install zent-kit -g
初始化组件
zent-kit init <your component name>
初始化一个组件目录,组件的模版从zent-seed下载。
开发模式
zent-kit dev
创建一个本地服务器,同时watch本地代码修改。
测试
zent-kit test
集成了Jest测试框架,用来跑组件的单元测试。
打包
zent-kit prepublish
打包src
目录下的文件,babel转码的文件会输出到lib
目录下,同时dist
目录下会生成一个包含所有代码的UMD模块文件。
File Structure
// 源文件-- src // 组件源文件目录-- assets // sass源文件目录-- examples // demo文件目录-- package.json // 生成文件-- README.md // 由package.json和src下文件生成-- lib // 经过babel转码的组件文件以及编译过的css-- dist // 经过webpack打包的,符合UMD规范的组件文件
Style
- 考虑到让用户更加容易自定义样式,尽量不要在组件源文件当中import样式文件,应该在examples目录下的文件中进行import
- 用户如果需要使用组件样式,可以直接引入我们在assets文件夹下的sass源文件,或者lib文件夹下编译完成的css文件
README
README文件的规范包含:
-- 描述 // 必选项:简单描述包特性-- 使用场景 // 可选项:简单描述组件场景-- tips // 可选项:一些简单的设计思想的描述,或者特殊接口的介绍-- API // 必选项:介绍本组件的使用方式
package.json
如果不使用zent-kit init,自行编写的package.json需参考以下代码