smallfish

Directory Structure

Application Directory Structure

In order to standardize the architecture and code quality of the application, smallfish uses a lot of convention alternative code writing in the framework. The following folder or file comment contains a * description that is an agreed directory or file.

.
├── config                  // * Application configuration folder
│ ├── config.js             // * Application configuration, interface proxy, routing, configuration switch, etc.
│ └── plugin.js             // * Customized smallfish plugin directory
├── mock                    // * folder where the mock data is stored
│ └── *.js                  // * Local simulation data
├── src                     // business code directory
│ ├── component             // generic component, accessible via '@/component' alias
│ ├── model                 // dva model (valid when dva configuration is enabled)
│ ├── service               // request service, accessible via '@/service' alias
│ ├── util                  // Tool library, accessible via '@/util' alias
│ ├──layout                 // Layout component, accessible via '@/layout' alias
│ ├── i18n                  // * i18n related data
│ | ├── zh-CN.js            // * i18n data for a single language
│ | ├── *.js                // * i18n data for a single language
│ | └── index.js            // * i18n language data entry file
│ └── page                  // * page, the following page can be a folder, or it can be a JS page component
│ ├── .umi                  // Temporary folder generated by smallfish, no need to submit
│ └── *                     // Other page component code, refer to the page component structure below
├── test                    // * Test sample storage folder
│ └── *.test.js             // * Unit test file, you need to follow the naming convention of *.test.js
├── .eslintignore           // * Configure files that need to be ignored by eslint code detection (no change required)
├── .eslintrc               // * Custom eslint rules (no change required)
├── .stylelintrc            // * Custom stylelint rules (no changes required)
├── .gitignore              // * Configuration requires git to ignore submitted and modified files
├── jsconfig.json           // VSCode JS project configuration
├── .editorconfig           // Editor code style configuration for most editors
└── package.json            // * Information configuration such as application dependencies

page directory structure

- page
  └── [SomePage]
    ├── component         // If the page is more complex, it can be split into more components
    ├── index.js          // * page component entry file
    ├── style.less        // style
    ├── model.js          // * The page model will be mounted by default. Note that a globally unique namespace is required (valid when the dva configuration is enabled)
    ├── model             // * When there are multiple models, you can create a new folder instead of model.js (valid when dva configuration is enabled)
    │ └── [modelname].js  // * The page model will be mounted by default. Note that you need a globally unique namespace.
    └── service.js        // page own service

← Configuration →