基于 Ng-zorro-antd 的企业后台模板 ng-alain

爱被打了一巴掌 2022-05-19 11:20 201阅读 0赞

ng-alain 详细介绍

### ng-alain ###

一套基于 [Ng-zorro-antd][]【ANT DESIGN】 的企业后台模板。

[README in English][]

[DEMO][]

快速入门

确保 `node` 版本 >= 6.9.0 且 `npm` 版本 >= 3 以上。

`ng-alain` 本身并非组件库，只是一个单纯的企业后台模板，你可以**直接克隆**到你的本地，然后立即进入实际开发。

# clone ng-alain repo
    # --depth 1 removes all but one .git commit history
    git clone --depth 1 https://github.com/cipchk/ng-alain.git
    
    # change directory
    cd ng-alain
    
    # install npm package
    # in china please use cnpm （https://github.com/cnpm/cnpm）
    npm install
    
    # start the serve
    npm start
    
    # use HMR
    npm run serve:hmr

环境

<table> 
 <thead> 
  <tr> 
   <th>包</th> 
   <th>版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>ng-alain</code></td> 
   <td>0.0.1-beta.3</td> 
  </tr> 
  <tr> 
   <td><code>ng-zorro-antd</code></td> 
   <td>0.5.1</td> 
  </tr> 
  <tr> 
   <td><code>@angular</code></td> 
   <td>4.4.1</td> 
  </tr> 
  <tr> 
   <td><code>@angular/cli</code></td> 
   <td>1.4.2</td> 
  </tr> 
 </tbody> 
</table>

**第三方类型\[可选\]**

<table> 
 <thead> 
  <tr> 
   <th>包</th> 
   <th>额外依赖</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>font-awesome</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>simple-line-icons</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>weather-icons</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>angular-baidu-maps</code></td> 
   <td>&nbsp;</td> 
   <td>BaidDu Map</td> 
  </tr> 
  <tr> 
   <td><code>angular-qq-maps</code></td> 
   <td>&nbsp;</td> 
   <td>QQ Map</td> 
  </tr> 
  <tr> 
   <td><code>angular-web-storage</code></td> 
   <td>&nbsp;</td> 
   <td>LocalStorage</td> 
  </tr> 
  <tr> 
   <td><code>ng2-charts</code></td> 
   <td><code>chart.js</code></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>d3</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>g2-angular</code></td> 
   <td><code>g2</code></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>jquery-sparkline</code></td> 
   <td><code>jquery</code></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>ng2-file-upload</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>ng2-img-cropper</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>ngx-color-picker</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>ng-tree-antd</code></td> 
   <td><code>angular-tree-component</code></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>ng2-dnd</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>sweetalert</code></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

指引文章

`ng-alain` 非常单纯，整体的设计都基于 `ng-zorro-antd`。虽然 antd 的栅格、布局已经足够满足我们日常的需求，然而出于对企业后台在开发过程中总是需要一点微调，因此我独立构建了一套用作这类需求工具类样式。

因此，在你开始ANTD之前最好先了解以下系列文章，他们会帮助你更好的理解 antd 是怎么一回事，以及为什么需要这一套工具类规则。

*  [整个antd的指引文章（非常经典一定要细读）][antd]
 *  [设计规则][Link 1]
 *  [CSS组件补丁类][CSS]
 *  [工具类规则][Link 2]
 *  [接地气Pipe][Pipe]
 *  [ACL访问控制][ACL]
 *  [目录结构与版本升级说明][Link 3]
 *  为了减少github的发布，后续有关 `ng-alain` 的文章，会一直发布在我的[SF专栏][SF]当中。

特性

*  基于 `ng-zorro-antd`
 *  响应式
 *  国际化
 *  ACL访问控制
 *  延迟加载及良好的启用画面
 *  良好的UI路由设计
 *  十种颜色版本
 *  SCSS预编译
 *  良好的目录组织结构
 *  简单升级
 *  模块热替换

应用截图

[![desktop][]][desktop 1][![ipad][]][ipad 1] [![iphone][]][iphone 1]

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1.  Use [GitHub Issues][] board to report bugs and feature requests (not our email address)
2.  Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the [LICENSE][] file for the full text)

### ng-alain ###

一套基于 [Ng-zorro-antd][]【ANT DESIGN】 的企业后台模板。

[README in English][]

[DEMO][]

快速入门

确保 `node` 版本 >= 6.9.0 且 `npm` 版本 >= 3 以上。

`ng-alain` 本身并非组件库，只是一个单纯的企业后台模板，你可以**直接克隆**到你的本地，然后立即进入实际开发。

环境

**第三方类型\[可选\]**

指引文章

因此，在你开始ANTD之前最好先了解以下系列文章，他们会帮助你更好的理解 antd 是怎么一回事，以及为什么需要这一套工具类规则。

特性

应用截图

[![desktop][]][desktop 1][![ipad][]][ipad 1] [![iphone][]][iphone 1]

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

Thanks for understanding!

License

The MIT License (see the [LICENSE][] file for the full text)

[Ng-zorro-antd]: https://github.com/NG-ZORRO/ng-zorro-antd
[README in English]: https://github.com/cipchk/ng-alain/blob/master/README.md
[DEMO]: https://cipchk.github.io/ng-alain/
[antd]: https://ant.design/docs/spec/introduce-cn
[Link 1]: https://github.com/cipchk/ng-alain/blob/master/_documents/layout.md
[CSS]: https://github.com/cipchk/ng-alain/blob/master/_documents/component-patch.md
[Link 2]: https://github.com/cipchk/ng-alain/blob/master/_documents/utils.md
[Pipe]: https://github.com/cipchk/ng-alain/blob/master/_documents/pipe.md
[ACL]: https://github.com/cipchk/ng-alain/blob/master/_documents/acl.md
[Link 3]: https://github.com/cipchk/ng-alain/blob/master/_documents/upgrade.md
[SF]: https://segmentfault.com/blog/cipchk
[desktop]: https://github.com/cipchk/ng-alain/raw/master/_screenshot/desktop.png
[desktop 1]: https://github.com/cipchk/ng-alain/blob/master/_screenshot/desktop.png
[ipad]: https://github.com/cipchk/ng-alain/raw/master/_screenshot/ipad.png
[ipad 1]: https://github.com/cipchk/ng-alain/blob/master/_screenshot/ipad.png
[iphone]: https://github.com/cipchk/ng-alain/raw/master/_screenshot/iphone.png
[iphone 1]: https://github.com/cipchk/ng-alain/blob/master/_screenshot/iphone.png
[GitHub Issues]: https://github.com/cipchk/ng-alain/issues
[LICENSE]: https://github.com/cipchk/ng-alain/blob/master/LICENSE