Kylin 前端开发脚手架

开发原则

• 现代网站必须能够响应并处理用户所做的所有操作，并保持UI的速度。

开发环境

• Angular CLI 7.2.1
• Node: 10.15.0
• ng-zorro 7.0.0-rc.3 版本
• 使用最新版vsCode或者webstorm
• 使用platform-web-server搭建mock服务器(如果不需要可以跳过)

安装方法

• 全局安装依赖 @angular/cli: npm i -g @angular/cli(避免使用cnpm)
• 安装git
• 使用git下载项目(git教程)
• 进入项目安装依赖 npm i (这时候可以打包测试一下,如果正常,安装完成)

项目启动

• 命令行下ng serve,默认访问地址:http://localhost:4200/

项目打包

• npm run aot 项目下新生成的dist文件内

检查包体积

• npm i -g webpack-bundle-analyzer@latest
• npm run analyze
• cd dist/
• webpack-bundle-analyzer stats.json --port 88

命名规范

• 指令:[kylinAcl] 驼峰写法,必须以kylin开头
• 组件:'kylin-open-layer' 必须以kylin开头
• 管道:'kylinPipe' 驼峰写法,必须以kylin开头
• 更多规范请参考angular风格指南
• 参照编辑器ts-lint提示书写

开发规范

• 新增模块应该使用惰性加载的方式,引入sharedModule获取各种开发包依赖
• 新增管道,组件,指令 放入shared模块对应目录下
• shared模块下新增模块不建议使用独立模块,防止因为依赖出现奇怪的问题
• 新增全局service 放在core模块下
• 惰性加载模块内组件的service如果是单例服务,那么可以声明在使用此服务的组件内
• 除非无法确定对象的数据结构,不然不应该使用any类型,应当使用自定义类来描述对象结构,方便查错和开发

如何快速新建一个惰性加载模块

• ng g m module-name --routing
• cd module-name
• ng g c module-name --flat

使用工具快速生成一个惰性加载模块

• ng g kylin-ma:all --name moduleName (moduleName就是你模块的命名)
• 目前工具有一些BUG,会在app路径下生成此模块,直接拖动文件夹移动即可.会自动修改app.module.ts文件,只要使用编辑器撤销的他的修改即可

快捷方式

• 引入http服务: import {HttpService} from '@http' ; 更多快捷方式请查看tsconfig.json文件
• 引入shared模块 : import {SharedModule} from '@shared' ;
• 引入shared下class: import {ResponseData, User, RequestParams, CustomRequestParams} from '@class' ;
• 更多快捷引用方式,查看tsconfig.json文件

打包和测试

• npm run aot 即可使用树摇优化打包项目
• 注意: 如果有任何关于@NgModule内imports数组内容的变动,那么需要从新 ng server才能查看到最新改动! 切记!
• 提交代码或者合并代码之前请使用npm run aot打包一下,确保代码没有错误,之后运行ng lint指令检查语法是否符合项目规范

页面设计规范

• 所有按钮的事件都应该防止用户可以连续点击,最简单的解决方案就是给按钮添加loading状态.

core 模块里面的公共服务

• 路由跳转 router.service.ts 使用 import {RouterService} from '@kylin/router';
• HTTP服务 http.service.ts 同上
• 路由守卫 auth-router.service.ts 同上
• 浏览器缓存 cache.service.ts 同上

shared 模块内管道

• date-pipe.ts 是时间格式处理管道 把时间戳处理成项目需求的YYYY-MM-DD HH:mm:ss的时间格式

underscore如何引用

• import * as _ from 'underscore';

子组件修改父组件样式

• :host ::ng-deep

参考资料

• angular官网
• angular学习资料
• ng-zorro官网

angular/cli 指令速查表

• 点击属性名称可以查看当前属性支持的全部参数 : 请务必完整浏览一遍,可以大幅提升开发效率

浏览器缓存

• 登陆成功以后后端返回的信息将会分类缓存在tokenService,menuService,userService等服务中

angular自带pipe