UmiJS               Ant Design Mobile

umi-antd-mobile Mobile Application

English · 中文

Getting Started

Environment Setup

First, make sure you have node, and ensure the node version is 10.13 or above (it is recommended to use nvm to manage node versions on Mac).

$ node -v
v10.13.0

It is recommended to use yarn to manage npm dependencies and use a domestic source.

# Domestic source
$ npm i yarn tyarn -g

# Use tyarn instead of yarn in the following documents
$ tyarn -v

# Alibaba internal source
$ tnpm i yarn @ali/yarn -g

# Use ayarn instead of yarn in the following documents
$ ayarn -v

Getting Started

Clone the project

$ git clone --depth=1 https://github.com/hqwlkj/umi-antd-mobile.git my-project

$ cd my-project

Install project dependencies

$ yarn

Start locally

$ yarn start

Deployment

Build

$ yarn build

✔ Webpack
  Compiled successfully in 17.17s

 DONE  Compiled successfully in 17167ms                                       8:26:25 PM

Build success.
✨  Done in 20.79s.

The build output is generated by default to ./dist. Use the tree command to view it.

tree ./dist

./dist
├── index.html
├── umi.css
└── umi.js

Local Verification

Before deploying, you can use serve for local verification.

$ yarn global add serve
$ serve ./dist

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.12.34:5000    │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

Visit http://localhost:5000, it should be consistent with executing yarn start.

Deployment

After local verification, you can deploy. You need to deploy the dist directory to the server.

For more configuration related to umijs, please refer to the umijs official documentation.

For more usage instructions on antd-mobile components, please refer to the Ant Design Mobile official documentation.

Preview Effect Diagram

        

2024-06-21.09.14.51.mov

Currently, it is still a test demo, so the pictures are just screenshots.

Built-in Layout

There are two commonly used layout components configured in src/layouts.

1. The tab-bar layout is mainly used to dynamically generate pages with Tabbar based on the configured routes (as shown in the example effect diagram); it can also select the corresponding TabItem based on the address in the browser's address bar.
2. The basic layout is mainly used for ordinary routing; currently, it is not extensively wrapped.

These layouts need to be rethought; community suggestions are welcome.

FAQ

1. How to change the automatically generated TabBar icon?

Since the umijs route configuration does not support the icon attribute as an icon, you need to handle it yourself as follows:

When configuring routes, set icon to the icon name in antd-mobile-icons; then modify it in the renderTabItemIcon function in src/layouts/tab-bar/index.tsx.

Contributing

We welcome your contributions. You can contribute in the following ways:

• Report bugs or make inquiries through Issues.
• Submit Pull Requests to improve the code.

LICENSE

MIT

---