/tanbo-ui-doc

tanbo-ui文档

Primary LanguageHTML

Angular-webpack项目模板

本项目 demo 是基于 webpack 的 angular 项目,语言为 typescript + es6; 本项目为单页应用,历史纪录基于 angular 默认的 html5 history api,在正式发布后,后台需配置相关页面解析逻辑,防止404页面出现

如何使用?

  1. 打开控制台,并进入项目根目录
  2. 在控制台输入以下代码 npm install 并回车,等待安装完毕
  3. 确保安装没有错误,运行 npm start,如无意外,这时将自动打开 chrome 浏览器,并显示出 demo 的默认页面了

项目约定

  • app 目录是存放主模块文件
  • assets 目录存放公共的图片和样式表
  • modules 公共模块目录
  • pages 存放页面文件夹

你可以在 src 内扩展你需要的目录

代码风格

  • 项目采用了 tslint 作为代码检查工具
  • 请确保代码风格符合 codelyzer 标准,否则启动和构建会不成功,如果不小心写出的代码不符合代码规范,请注意控制台输出错误的信息,并做出相应更改,直到没有代码语法错误

自动化测试

npm run test 为确保项目的健壮性、可维护性和可预期,建议为每一个项目中的文件写单元测试,测试工具为 karma,框架为 jasmine,相关文档可上互联网上搜索

默认情况下,单元测试文件以 XXX.spec.ts 命名

构建发布

  1. 确认本地在开发过程中,没有代码错误,及编译警告
  2. 在控制台输入 npm run build
  3. 等编译完成后,会在根目录下生成一个 dist 的目录,里面存有打包编译后的文件

直接运行打包后的代码

npm run production

调试代理

接口代理默认拦截以 /api/ 开头的请求,并会重写 url 为 /,目前通过 angular 的拦截器,并根据当前的环境添加 /api 的前缀,详情请查看 src/app/api-interceptor.ts