Angular UI框架 Ng-alain @delon的脚手架的生成开发模板
2018-02-13 20:22
831 查看
前言
首先感谢下 cipchk基于 Ng-Zorror 框架上制作的ng-alain 。之前很早就关注了 ng-alain,今天得空折腾了下。
折腾的时候发现官方文档有些坑,没有写清楚,所以我作为一些补充吧~
之前在微软MVP群里,董斌辉邀请了cipchk做了一次分享,厚着脸皮要了PPT,看了看ng-alin的定位。跟我的项目契合度 很高。那么我们就试试水呗。
正文
说事情,要PPT别找我。如何使用 安装&配置
第一种方式:
直接 clone git 仓库$ git clone --depth=1 https://github.com/cipchk/ng-alain.git my-project cd my-project # 安装依赖包 npm install # 启动 npm start # 使用HMR启动 npm run serve:hmr
成功运行了是吧,但是有个问题?我们要是真在这上面开发功能,那不是GG了。删除一大堆组件都累死了。
所以Ng-alain提供了一个脚手架构建工具@delon。
这就是我提高的第二种方式。
@delon/cli 是基于 Angular Cli 向上构建的针对 ng-alain 脚手架的命令行工具,因此在安装之前要先确保以下类库应该安装:
第二种(推荐方式)
因为官方的文档有坑,所以才有这篇文档~安装&配置
首先我们要安装npm install -g @angular-devkit/core @angular-devkit/schematics @schematics/schematics rxjs npm install -g @angular/cli
@delon/cli 允许你全局安装或只针对本地项目,对于全局后期所有命令都无需填写 --collection 选项。
全局安装:
npm install -g @delon/cli
我们先是使用@AngularCli工具生成一个项目。
ng new my-dream-app
默认进行npm包的下载。
运行程序保证不报错,这一步蛮重要的。 npm start
然后我们干一个事情,
然后设置 .angular-cli.json 的默认 collection:
"defaults": { "schematics": { "collection": "@delon/cli" } }
进入到my-dream-app文件夹中
然后我们删除其他不需要的文件。
这个时候再来执行,
npm install @delon/cli --save-dev
安装@delon/cli到本地,然后就可以创建ng-alain的模板了
ng new -c=@delon/cli lonely
然后就是慢慢等待包的还原,还原完毕后。
cd lonely npm start
编译完成后自动会打开http://localhost:4200/#/dashboard
最后的效果图就是:
以上就是全部了。
尾声
ng-alain 还很年轻,中间会有很多的bug,作者看起来是全职在搞,毕竟看到PR的人不是很多,我主要是搞后端,后期会用几个项目和ng-alain进行配套。最后希望国内高质量的开源项目会越来越多。
About Me-
END -
相关文章推荐
- angular6.0开发教程之如何安装angular6.0框架
- 推荐十个拥有丰富 UI 组件的 JavaScript 开发框架
- 快速提高UI开发效率的应用框架,
- 颠覆式前端UI开发框架:React
- JAVA Maven SSM框架以及SpringBoot,mybatise框架整合实例开发的脚手架
- Kendo UI开发教程(7): Kendo UI 模板概述
- 【Facebook的UI开发框架React入门之三】第一个项目(iOS平台)-goodmao
- iOS开发——多线程篇——快速生成沙盒目录的路径,多图片下载的原理、SDWebImage框架的简单介绍
- 随应潮流-基于ABP+Angularjs现代化应用软件开发框架(1)-总体介绍
- 详解Angular路由 ng-route和ui-router的区别
- web项目快速开发使用UI框架优势
- 【Facebook的UI开发框架React入门之七】多View布局与样式Style简介(iOS平台)-goodmao
- [Web UI]对比Angular/jQueryUI/Extjs:没有一个框架是万能的
- 前端基于react,后端基于.net core2.0的开发之路(番外篇) 后端使用T4模板,生成某些类
- 利用Angular实现多团队模块化SPA开发框架
- Web API应用架构在Winform混合框架中的应用(4)--利用代码生成工具快速开发整套应用
- 轻量级的前端UI开发框架 - UIkit
- MVP一键生成 Template模板开发与快速开发神器
- Yahoo贡献的移动应用开发框架 MVC - Mojito, UI - YUI
- [C#]一步一步开发自己的自动代码生成工具之五:DAL层模板