Project Overview

This chapter introduces the role of each part in a Vela JS application project, based on the project initialized in Environment Setup.

Directory Structure

A typical project directory structure is as follows:

├── README.md            # Project description file
├── package.json         # Project configuration file
├── build/               # Build intermediates
├── dist/                # Final build output
├── sign/                # Signing files
│   ├── certificate.pem
│   └── private.pem
└── src/                 # Source code directory
    ├── app.ux           # Application entry file
    ├── manifest.json    # Project configuration file
    ├── common/          # Public resources directory
    │   ├── components/  # Components directory
    │   │   └── button.ux
    │   ├── images/      # Images directory
    │   │   └── logo.png
    │   └── scripts/     # Scripts directory
    │       └── index.js
    ├── i18n/            # Multilingual configuration directory
    │   ├── defaults.json
    │   ├── en.json
    │   └── zh-CN.json
    └── pages/           # Pages directory
        ├── detail/detail.ux
        └── index/index.ux

Directory Details

src/

The source code directory. All application code resides here. src/ is a fixed directory name and cannot be changed.

src/manifest.json

The project configuration file, used to declare basic application information (package name, version, etc.), system interface permissions, and page routing. For detailed field descriptions, refer to Project Configuration.

src/app.ux

The application entry file, used to define application-level lifecycle callbacks, global data, and global methods. For detailed usage, refer to app.ux.

src/pages/

The pages directory, with each page in its own subdirectory. Pages are described by ux files, and styles and logic can optionally be split into separate css/js files. For details, refer to Project Structure.

src/common/

The public resources directory, used to store shared components, images, scripts, and styles across pages.

src/i18n/

The multilingual configuration directory, containing JSON files for each language to support application internationalization. For detailed usage, refer to Internationalization.

build/ and dist/

build/ stores intermediate build artifacts, and dist/ stores the final build output (rpk packages). Both directories are automatically generated by the build tools and do not require manual maintenance.

sign/

The signing files directory, containing certificate.pem (certificate) and private.pem (private key), used to sign the application package.

package.json

The npm configuration file for the project, defining project dependencies and build scripts.