This article need re-translated, hope that your can PR to translated it. Help us!

介绍

什么是NG-ALAIN

NG-ALAIN 是一个企业级中后台前端/设计解决方案脚手架,我们秉承 Ant Design 的设计价值观,目标也非常简单,希望在Angular上面开发企业后台更简单、更快速。随着『设计者』的不断反馈,将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。

环境搭建

Angular 开发环境至少需要安装 Node.js(Node.js 内置了 npm 无须单独安装,如果习惯使用 Yarn 需要单独额外安装)、VSCode编辑器,其中 Node.js 建议安装 LTS 版本,安装完成后可以通过终端窗口中运行:

node -v # 查看 Node.js 当前版本
npm -v  # 查看 Npm 当前版本

Npm 默认从国外源来下载包信息,鉴于国内环境因素,在开始下一步前先设定淘宝提供 Npm 源镜像:

# 设置淘宝源
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
# 恢复默认源
npm config delete registry
npm config delete sass_binary_site

也可以使用 nrm 包,可以快速切换不同国内镜像源。

安装

全局 Angular Cli

安装之前请先确保本地已经安装全局 Angular Cli,只有这样才能随时随地在终端使用 ng 命令,可以通过终端窗口中运行:

npm install -g @angular/cli

创建NG-ALAIN项目

NG-ALAIN 必须先创建一个全新的 Angular 项目,可以通过终端窗口中运行:

ng new my-project --style less --routing

如果你想了解 --style--routing 参数,请参考 ng new 文档。

当提示 Packages installed successfully. 表示创建成功,接下来只需要将 NG-ALAIN 添加到 my-project 项目中即可,在 my-project 目录下通过终端窗口中运行:

ng add ng-alain

NG-ALAIN 会询问是否需要一些额外的插件,一开始完全可以一路回车,这些插件都是可插拔,后期可以自行添加与移除。

以上只会生成干净的项目,可以直接用于生产环境中。你可能在预览上看到许多示例页,它们全都可以在 Github 查看到源代码,当然也可以通过 Git 克隆代码的形式获得:

git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project
cd my-project
npm install

运行

npm start

启动完成后会打开浏览器访问 http://localhost:4200,若你看到如下页面则代表成功了。

恭喜你,你已经成功部署一个 NG-ALAIN 项目。

如何贡献

在任何形式的参与前,请先阅读 贡献者文档。如果你希望参与贡献,欢迎 Pull Request,或给我们 报告 Bug

强烈推荐阅读 《提问的智慧》(本指南不提供此项目的实际支持服务!)、《如何向开源社区提问题》《如何有效地报告 Bug》《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

社区互助

如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 ng-alain 标签。

  1. QQ 群

  2. Segment Fault(中文)

  3. 加入 NG-ALAIN 自助服务群(中文)

捐助

如果你觉得 NG-ALAIN 不错,可以考虑自愿为本站打赏或捐助。