UmiJS
Ant Design Mobile
umi-antd-mobile 移动应用
[](https://umijs.org/zh-CN)
[](https://mobile.ant.design)
[](https://github.com/hqwlkj/umi-antd-mobile)
[English](./README.md) · 中文
# 快速上手
## 环境准备
首先得有 [node](https://nodejs.org/en/)，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 [nvm](https://github.com/creationix/nvm) 来管理 node 版本）
```bash
$ node -v
v10.13.0
```
推荐使用 yarn 管理 npm 依赖，并[使用国内源](https://github.com/yiminghe/tyarn)（阿里用户使用内网源）。
```bash
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v
```
## 开始使用
clone项目
```bash
$ git clone --depth=1 https://github.com/hqwlkj/umi-antd-mobile.git my-project
$ cd my-project
```
安装项目依赖
```bash
$ yarn
```
本地启动
```bash
$ yarn start
```
## 部署发布
### 构建
```bash
$ yarn build
✔ Webpack
Compiled successfully in 17.17s
DONE Compiled successfully in 17167ms 8:26:25 PM
Build success.
✨ Done in 20.79s.
```
构建产物默认生成到 `./dist` 下，然后通过 tree 命令查看，
```bash
tree ./dist
./dist
├── index.html
├── umi.css
└── umi.js
```
### 本地验证
发布之前，可以通过 `serve` 做本地验证，
```bash
$ 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! │
│ │
└────────────────────────────────────────────────────┘
```
访问 [http://localhost:5000](http://localhost:5000)，正常情况下应该是和执行 `yarn start` 时是一致的。
### 部署
本地验证完，就可以部署了。你需要把 `dist` 目录部署到服务器上。
更多关于 **umijs** 的相关配置，请查阅 [umijs官方文档](https://umijs.org/zh-CN/config)
更多关于 **antd-mobile** 的相关组件使用说明，请查阅 [Ant Design Mobile官方文档](https://mobile.ant.design/zh/components/button)
## 预览效果图
https://github.com/hqwlkj/umi-antd-mobile/assets/12181423/e7fc06ba-f835-4f7c-a412-a7e0b9664095
目前还是一个测试demo，所以图片就是一个截屏图，大家先将就看看 😂😂😂
## 内置 Layout
在 `src/layouts`中配置了两个常用的 `layout` 组件。
>1、`tab-bar` layout 主要用于根据配置的 `routes` 动态生成带有 Tabbar 的页面(如示例效果图)；同时可以根据浏览器地址栏的地址选择对于的 TabItem;
>2、