# digital-chicken **Repository Path**: c0dedance/digital-chicken ## Basic Information - **Project Name**: digital-chicken - **Description**: 智慧肉鸡云服务平台 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2022-03-25 - **Last Updated**: 2024-03-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ✨ 介绍 本项目使用 react + tsx/js + webpack + reducx + styled-components + pnpm 编写 ~~网址：暂未部署~~ # :fire:Quick Start ## :runner:如何运行 项目使用 pnpm 作为包管理器，首次运行需要安装一下 pnpm pnpm 与 npm 操作相似，只需一会会你便可从 npm 迁移到这边 ```bash npm i pnpm -g # 全局安装pnpm pnpm i # 安装依赖 pnpm start # 运行项目脚本 ``` ## :package:项目结构 ```js ┌── public // 静态资源(不会被Webpack打包) ├── src // 源代码 │ ├── services // API相关文件 │ ├── assets // 静态资源(会被打包) │ ├── components // 组件库(包括自定义的组件) │ ├── router // 路由表(路由相关文件) │ ├── store // Redux状态管理 │ ├── utils // 全局公用方法/工具函数 │ ├── common // 通用文件(常量) │ ├── pages // 页面，其中每个文件夹按照功能模块(子系统)划分 │ ├── App.tsx // 入口视图 │ └── index.js // 入口文件 ├── .editorconfig // 统一编辑器样式 └── .gitignore // git忽略配置 └── craco.config.js // 项目webpack配置 ├── babel.config.js // babel配置 ├── package.json // 包管理 └── craco.config.js // webpack配置 └── pnpm-lock.yaml // pnpm锁版本文件 └── tsconfig.json // ts配置 ``` ## :pencil2:页面编写 页面在`src/pages`下，找到自己的文件夹编写对应代码即可，如无请往下看 举个栗子：需求是需要编写加工模块(Process)下的加工过程管理(ProcessManage)，则在 1. `src/pages/process`新建 process-manage 文件夹，在文件夹下 2. 新建 index.tsx 中编写 jsx 和 js 逻辑 3. 新建 style.js 编写 styled-components 的样式 4. 【可选】在 store 中编写 redux 逻辑 以上可以模仿现有页面进行编写，同时遵循预设的规范 - 文件夹命名全部小写，中划线分割 - 统一的文件结构 - 等等 image-20220402193138072 # :book:简明教程 ## styled-components styled-components 可以在 js 中编写 css 样式（CSS in JS）,他既有 css 预处理器的能力：可书写样式嵌套、变量函数定义、循环等，也有超越其能力的动态绑定样式等 1. 安装插件`vscode-styled-components`，安装后在 js 文件书写样式会有提示，否则会很痛苦！ image-20220402194711582 2. 引入：`import styled from 'styled-components'` 3. 编写样式：styled.div` `，通过反引号（模板字符串）去调用方法，反引号内写样式 在这里跟在 css 文件很相似，DivWrapper 包裹在哪里，css 就在哪里生效 4. 导入并使用 ![image-20220402195156632](https://img.qkeep.cn/imgs/image-20220402195156632.png) ## pnpm 官网：https://pnpm.io/zh/ **npm&pnpm 命令对比** | 描述 | npm | pnpm | | ------------ | --------------------- | ----------------- | | 安装所有依赖 | npm install/i | pnpm install/i | | 安装单个依赖 | npm install/i | pnpm add | | 卸载所有依赖 | npm unintall/un | pnpm remove | | 卸载单个依赖 | npm unintall/un | pnpm remove | | 全局安装 | npm i xxx --global/-g | pnpm add -g | | 更新 | npm update | pnpm update | ## Git 开发前，需要确认在你自己的分支上进行 ### 一、初始化 链接远程仓库（为远程仓库起别名） ```bash git remote add origin git@gitee.com:c0dedance/digital-chicken.git ``` ### 二、基本操作 #### 2.1 查看状态 ```bash git status ``` #### 2.2 添加 指定文件提交到暂存区 ```bash git add ``` 将工作目录文件全都提交到缓存区 ```bash git add . ``` #### 2.3 提交 缓存区文件提交到仓库 ```bash git commit -m "<消息>" ``` #### 2.4 推送 推送到远程仓库你的分支上 ```bash git push origin <你的分支名> ``` # :pushpin:规范 ## 组件目录和文件组织规范 ## 代码风格 ### ESLint Eslint 是一个可以检验代码，并给出报告的工具。它的目标是保证代码的一致性，避免错误。 你需要在你的 VSC 安装插件：eslint ![image-20220404092235901](https://img.qkeep.cn/imgs/image-20220404092235901.png) ### prettier Prettier 是一款强大的代码格式化工具 你需要在你的 VSC 安装插件：prettier ![image-20210722214543454](https://img.qkeep.cn/imgs/008i3skNgy1gsq2acx21rj30ow057mxp.jpg) ### editorconfig 约束编辑器代码的风格，消除编码差异：回车符合、缩进距离等 你需要在你的 VSC 安装插件：EditorConfig for VS Code image-20210722215138665 ## Git 贡献提交规范 `commit 消息组成：类型 + 冒号 + 空格 + 动宾短语` 如：feat: 完成 xxx 页面编写 fix: 修复了页面无法跳转的 bug `feat`/`fix`最为常用 ### 类型 - `feat` 增加新功能 - `fix` 修复问题/BUG - `style` 代码风格相关无影响运行结果的 - `perf` 优化/性能提升 - `refactor` 重构 - `revert` 撤销修改 - `test` 测试相关 - `docs` 文档/注释 - `chore` 依赖更新/脚手架配置修改等 - `workflow` 工作流改进 - `ci` 持续集成 - `types` 类型定义文件更改 - `wip` 开发中