【亲测免费】 Genesis 项目使用教程

1. 项目目录结构及介绍

Genesis 项目的目录结构如下：

genesis/
├── docs/
│   └── zh-CN/
├── examples/
├── packages/
├── scripts/
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .stylelintignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── lerna.json
├── logo.svg
├── package.json
└── stylelint.config.js

目录结构介绍

• docs/: 包含项目的文档，特别是中文文档。
• examples/: 包含项目的示例代码。
• packages/: 包含项目的核心包和依赖。
• scripts/: 包含项目的脚本文件。
• .editorconfig: 编辑器配置文件。
• .eslintignore: ESLint 忽略文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件。
• .stylelintignore: Stylelint 忽略文件。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目介绍和使用说明。
• lerna.json: Lerna 配置文件。
• logo.svg: 项目 Logo。
• package.json: 项目依赖和脚本配置。
• stylelint.config.js: Stylelint 配置文件。

2. 项目的启动文件介绍

Genesis 项目的启动文件主要位于 examples/ 目录下。以下是启动文件的介绍：

• examples/index.js: 这是项目的入口文件，负责初始化项目并启动服务。
• examples/server.js: 这是服务器的启动文件，负责配置和启动服务器。

启动文件示例

// examples/index.js
const { createApp } = require('@fmfe/genesis-core');
const app = createApp();

app.start();

// examples/server.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

3. 项目的配置文件介绍

Genesis 项目的配置文件主要包括以下几个：

• .eslintrc.js: ESLint 配置文件，用于代码风格检查。
• stylelint.config.js: Stylelint 配置文件，用于样式检查。
• lerna.json: Lerna 配置文件，用于管理多包项目。
• package.json: 项目依赖和脚本配置。

配置文件示例

// .eslintrc.js
module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        "no-console": "off"
    }
};

// stylelint.config.js
module.exports = {
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 4
    }
};

// lerna.json
{
    "packages": [
        "packages/*"
    ],
    "version": "0.0.0"
}

// package.json
{
    "name": "genesis",
    "version": "1.0.0",
    "scripts": {
        "dev": "node examples/index.js",
        "build": "node scripts/build.js",
        "start": "node examples/server.js"
    },
    "dependencies": {
        "@fmfe/genesis-core": "^1.0.0",
        "express": "^4.17.1"
    }
}

通过以上配置文件，可以对项目进行代码风格检查、样式检查以及多包管理。