Zarm 开源项目使用教程

Zarm 开源项目使用教程

zarm基于 React 的移动端 UI 组件库项目地址:https://gitcode.com/gh_mirrors/za/zarm

1. 项目的目录结构及介绍

Zarm 项目的目录结构如下：

zarm/
├── build/
├── dist/
├── docs/
├── examples/
├── lib/
├── scripts/
├── src/
│   ├── components/
│   ├── styles/
│   ├── index.js
│   └── ...
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• build/: 构建生成的文件。
• dist/: 打包生成的文件。
• docs/: 项目文档。
• examples/: 示例代码。
• lib/: 编译后的文件。
• scripts/: 脚本文件。
• src/: 源代码目录。
  • components/: 组件代码。
  • styles/: 样式文件。
  • index.js: 项目入口文件。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintignore: ESLint 忽略配置。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略配置。
• .npmignore: npm 忽略配置。
• .prettierrc: Prettier 配置文件。
• CHANGELOG.md: 更新日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 许可证。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是整个项目的入口文件。该文件主要负责引入和初始化各个组件，并导出供外部使用。

// src/index.js
import Button from './components/button';
import Alert from './components/alert';
// 其他组件引入

export {
  Button,
  Alert,
  // 其他组件导出
};

3. 项目的配置文件介绍

.babelrc

Babel 配置文件，用于配置 Babel 转译器。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

.eslintrc

ESLint 配置文件，用于配置代码检查规则。

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    // 自定义规则
  }
}

package.json

项目依赖和脚本配置文件。

{
  "name": "zarm",
  "version": "1.0.0",
  "description": "ZhongAnTech mobile UI components",
  "main": "lib/index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.2"
  }
}

通过以上配置文件，可以对项目进行开发、构建和代码检查等操作。

zarm基于 React 的移动端 UI 组件库项目地址:https://gitcode.com/gh_mirrors/za/zarm