Skip to content

Commit

Permalink
📝 Update docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
zuiidea committed Nov 4, 2018
1 parent c2161ce commit 017af0d
Show file tree
Hide file tree
Showing 9 changed files with 331 additions and 10 deletions.
5 changes: 5 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
<p align="center">
<a href="http://github.com/zuiidea/antd-admin">
<img alt="antd-admin" height="64" src="./_media/logo.svg">
</a>
</p>

<h1 align="center">AntD Admin</h1>

Expand Down
3 changes: 1 addition & 2 deletions docs/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@
- [Configuration](configuration.md)
- Guide
- [Deploy](deploy.md)
- Changelog
- 5.0.0
- [Change Log](change-log.md)
50 changes: 50 additions & 0 deletions docs/change-log.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
## 5.0.0

#### Optimization

- Try to use decorators to simplify code writing and improve code readability.

- API configurization to simplify the way data is obtained.

- The files in `utils` are split and each has its own role.

- Simplify the `utils/request` file without special handling.

#### Specification

- Functions add comments, parameters, return values, etc., ambiguous code adds comments, canonical reference [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#appendices-jsdoc-tag-reference).

- Semantic version number, specification participation [semantic version 2.0.0](https://semver.org/lang/zh-CN/).

- Static code checking, unified code style, will use `prettier`, `stylelint`, `eslint` specification code before code submission.

- Git submits information normalization, [git-commit-emoji-cn](https://github.com/liuchengxu/git-commit-emoji-cn).

- Based on the pre-defined routing of `Umi`, there is no need to write a routing configuration file.

- Use `React 16` new features such as `Fragment`, `Context`, `PureComponent`, etc.

#### Features

- Support internationalization, extract source fields from source code, load language packs on demand, and automatically translate online.

- Support for the introduction of `ant-design-pro` components, `lodash` functions on demand.

- Support multiple layouts, which rules can be used according to the rules.

- Support Antd Admin to automatically compile and deploy on Travis.

- Generate a documentation website using `Docsify`.


#### Style

- Added Antd Admin standalone Logo.

- Rewrite the overall layout component, optimize the menu, automatic breadcrumb navigation, menu auto-expansion and other logic.

- The mobile menu is changed to drawer.

#### Other

- Discard components such as `IconFont`, `Search`, `DataTable` because they are well supported and replaceable in `Antd`.
111 changes: 111 additions & 0 deletions docs/deploy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
# Deploy

After the development is completed and verified in the development environment, it needs to be deployed to our users.

## Build

First execute the following command,

```bash
npm run build
```

After a few seconds, the output should look like this:

```bash
> [email protected] build /Users/zuiidea/web/antd-admin
> umi build

[21:13:17] webpack compiled in 43s 868ms
DONE Compiled successfully in 43877ms 21:13:17

File sizes after gzip:

1.3 MB dist/vendors.async.js
308.21 KB dist/umi.js
45.49 KB dist/vendors.chunk.css
36.08 KB dist/p__chart__highCharts__index.async.js
33.53 KB dist/p__user__index.async.js
22.36 KB dist/p__chart__ECharts__index.async.js
4.21 KB dist/p__dashboard__index.async.js
4.06 KB dist/umi.css
...
```

The `build` command will package all resources, including JavaScript, CSS, web fonts, images, html, and more. You can find these files in the `dist/` directory.

> If you have requirements for using HashHistory , deploying html to non-root directories, statics, etc., check out [Umi Deployment] (https://umijs.org/en/guide/deploy.html).
## Local verification


Local verification can be done via `serve` before publishing.

```
$ yarn global add serve
$ serve ./dist
Serving!
- Local: http://localhost:5000
- On Your Network: http://{Your IP}:5000
Copied local address to clipboard!
```

Access [http://localhost:5000](http://localhost:5000), under normal circumstances, it should be consistent with `npm start` (The API may not get the correct data).


## Deploy

Next, we can upload the static file to the server. If you use Nginx as the Web server, you can configure it in `ngnix.conf`:
```
server
{
listen 80;
# Specify an accessible domain name
server_name antd-admin.zuiidea.com;
# The directory where the compiled files are stored
root /home/www/antd-admin/dist;
# Proxy server interface to avoid cross-domain
location /api {
proxy_pass http://localhost:7000/api;
}
Because the front end uses BrowserHistory, it will route backback to index.html
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
}
```

Restart the web server and access [http://antd-admin.zuiidea.com](http://antd-admin.zuiidea.com) , You will see the correct page.

```bash
nginx -s reload
```

Similarly, if you use Caddy as a web server, you can do this in `Caddyfile`:

```
antd-admin.zuiidea.com {
gzip
root /home/www/antd-admin/dist
proxy /api http://localhost:7000
rewrite {
if {path} not_match ^/api
to {path} {path}/ /
}
}
antd-admin.zuiidea.com/public {
gzip
root /home/www/antd-admin/dist/static/public
}
```
5 changes: 2 additions & 3 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta name="description" content="An admin dashboard application demo built upon Ant Design and UmiJS">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/_media/favicon.ico" />
</head>

<body>
Expand Down Expand Up @@ -38,8 +38,7 @@
'/zh-cn/': '找不到结果',
'/': 'No Results'
}
},
// homepage: 'https://raw.githubusercontent.com/zuiidea/antd-admin/master/README.md'
}
}

// if (typeof navigator.serviceWorker !== 'undefined') {
Expand Down
5 changes: 5 additions & 0 deletions docs/zh-cn/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
<p align="center">
<a href="http://github.com/zuiidea/antd-admin">
<img alt="antd-admin" height="64" src="../_media/logo.svg">
</a>
</p>

<h1 align="center">AntD Admin</h1>

Expand Down
3 changes: 1 addition & 2 deletions docs/zh-cn/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@
- [配置项](zh-cn/configuration.md)
- 指南
- [部署](zh-cn/deploy.md)
- 更新日志
- 5.0.0
- [更新日志](zh-cn/change-log.md)
52 changes: 52 additions & 0 deletions docs/zh-cn/change-log.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
## 5.0.0

#### 优化

- 尽量使用修饰器,简化代码编写,提高代码可读性。

- API 配置化,简化获取数据方式。

- `utils` 内文件拆分,各司其职。

- 简化`utils/request`文件,不做特殊处理。

#### 规范

- 函数添加描述、参数、返回值等注释,含糊不清的代码增加注释,规范参考 [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#appendices-jsdoc-tag-reference)

- 语义化版本号,规范参加 [语义化版本 2.0.0](https://semver.org/lang/zh-CN/)

- 静态代码检查,统一代码风格,代码提交前将会使用 `prettier``stylelint``eslint` 规范代码。

- Git 提交信息规范化,[git-commit-emoji-cn](https://github.com/liuchengxu/git-commit-emoji-cn)

- 基于 `Umi` 的约定式路由,无需再写路由配置文件。

- 使用 `React 16` 新特性,如 `Fragment``Context``PureComponent`等。

#### 功能

- 支持国际化,源码中抽离翻译字段,按需加载语言包,自动在线翻译。

- 支持按需引入 `ant-design-pro` 组件、`lodash` 函数。

- 支持多布局,可根据规则规定哪些路由使用哪种布局。

- 支持 Antd Admin 在 Travis 上自动编译和部署。

- 使用 `Docsify` 生成文档网站。


#### 样式

- 新增 Antd Admin 独立 Logo。

- 重写整体布局组件,优化菜单、面包屑导航自动高亮,菜单自动展开等逻辑。

- 移动端菜单更改为抽屉式。

#### 其他

- 废弃 `IconFont``Search``DataTable`等组件,因为在 `Antd` 中有很好的支持和可替代的。


107 changes: 104 additions & 3 deletions docs/zh-cn/deploy.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,112 @@
# 部署

## 本地开发
完成开发并且在开发环境验证之后,就需要部署给我们的用户了。

1. 静态文件编译
## 构建

先执行下面的命令,

```bash
npm run trans #可选,提取翻译字段,并自动翻译
npm run build
```

几秒后,输出应该如下:

```bash
> [email protected] build /Users/zuiidea/web/antd-admin
> umi build

[21:13:17] webpack compiled in 43s 868ms
DONE Compiled successfully in 43877ms 21:13:17

File sizes after gzip:

1.3 MB dist/vendors.async.js
308.21 KB dist/umi.js
45.49 KB dist/vendors.chunk.css
36.08 KB dist/p__chart__highCharts__index.async.js
33.53 KB dist/p__user__index.async.js
22.36 KB dist/p__chart__ECharts__index.async.js
4.21 KB dist/p__dashboard__index.async.js
4.06 KB dist/umi.css
...
```

`build` 命令会打包所有的资源,包含 JavaScript, CSS, web fonts, images, html 等。你可以在 `dist/` 目录下找到这些文件。

> 如果  有使用 HashHistory 、 部署 html 到非根目录、静态化等需求,请查看[Umi 部署](https://umijs.org/zh/guide/deploy.html)
## 本地验证


发布之前,可以通过 `serve` 做本地验证,

```
$ yarn global add serve
$ serve ./dist
Serving!
- Local: http://localhost:5000
- On Your Network: http://{Your IP}:5000
Copied local address to clipboard!
```

访问 [http://localhost:5000](http://localhost:5000),正常情况下法应该是和 `npm start` 一致的(接口可能无法获取到正确数据)。


## 部署

接下来,我们可以把静态文件上传到服务器,如果使用 Nginx 作为 Web server,你可以在 `ngnix.conf` 中这样配置:

```
server
{
listen 80;
# 指定可访问的域名
server_name antd-admin.zuiidea.com;
# 编译后的文件存放的目录
root /home/www/antd-admin/dist;
# 代理服务端接口,避免跨域
location /api {
proxy_pass http://localhost:7000/api;
}
# 因为前端使用了BrowserHistory,所以将路由 fallback 到 index.html
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
}
```

重启 Web server,访问 [http://antd-admin.zuiidea.com](http://antd-admin.zuiidea.com) ,你将看到正确的页面。

```bash
nginx -s reload
```

类似的,如果你使用 Caddy 作为 Web server,你可以在 `Caddyfile` 中这样配置:

```
antd-admin.zuiidea.com {
gzip
root /home/www/antd-admin/dist
proxy /api http://localhost:7000
rewrite {
if {path} not_match ^/api
to {path} {path}/ /
}
}
antd-admin.zuiidea.com/public {
gzip
root /home/www/antd-admin/dist/static/public
}
```

0 comments on commit 017af0d

Please sign in to comment.