njoy-design

A static site base on dumi.

主题和样式规范

采用约定命名规则的方案 , 有以下优点: a.以避免样式污染 b.可以对外提供源码, 方便用户覆盖变量或者样式 , 给使用者更大的自由 具体规范如下: 主题变量以 "njoy_theme" 开头 , 比如 "njoy_theme_text_color" 类名 以 "njoy" 开头 , 比如 "njoy_list" 以下是主题变量: // 背景颜色 --njoy_theme_bg_color: #000000; // 字体颜色 --njoy_theme_text_color: white; // 字体大小 --njoy_theme_text_size: 14px; // 边框颜色 --njoy_theme_border_color: gray; // 边框尺寸 --nojy_theme_border_size: 1px; // 圆角 --njoy_theme_border_radius: 6px; // pading --njoy_theme_padding: 8px; // marging --njoy_theme_marging: 8px; // 图标尺寸 --njoy_theme_icon_size: 14px;

使用说明

• 安装依赖

npm install

• 开发模式运行

npm start

• 编译项目

npm run build

• 校验格式

npm run lint
npm run prettier

• 提交代码（会自动校验 eslint 和 prettier）

npm run cz

规范

项目使用了 eslint 代码检测插件和 prettier 格式化插件

• Eslint 检查代码命令 npm run lint

• Eslint 修复代码命令 npm run lint：fix

• Prettier 格式化命令 npm run prettier

目录

├── dist # 打包后文件夹 │ ├── esm/index.js # 打包后入口文件 ├── src │ ├── assets # 静态文件 例如图片，视频，音频等资源文件 │ ├── login # 单个组件文件夹 │ │ ├── index.tsx # 组件源码 │ │ ├── styles # 组件所有样式文件夹 │ │ └── index.md # 组件文档 | |—— styles # 公共样式文件 | |—— theme # 主题样式文件 | |—— njoyd.less # 组件库默认样式文件，包含主题样式 | |—— index.ts # 组件库入口文件 ├── .dumirc.ts # dumi 配置文件 ├── .fatherrc.ts # father 的配置文件，用于组件库打包 ├── .cz-config.cjs # 提交代码时的自定义提示文件 ├── .commitlint.config.cjs # 提交代码时的限制提交规则配置 ├── .eslintrc.js # eslint配置文件 ├── .prettierrc # prettier配置文件 ├── .gitignore # git提交忽略文件 ├── .prettierignore # prettier忽略文件 ├── README.md # 说明性的一个文件 |—— package-lock.json # 缓存文件，用于记录所安装的插件的版本号等信息 |—— package.json # 项目的说明性文件，用于说明项目的名字，版本，所配置的依赖