介绍
angular-cyanez-starter
是一个为 Angular 应用提供的快速启动模板。包含了 Angular 常用依赖、组件库和工具链, 并且支持一键打包、压缩等多种优化功能。
安装
使用 npm
安装:
--- ------- -- ------------ -- --- ------ ------- ---- --------- ------------ -- ------ --- ------- ------------------------------ ------
使用
在 app.module.ts
中导入:
------ - ----------------------- - ---- --------------------------------------- ------ - -------------------------- - ---- --------------------------------- ----------- ------------- - ------------- -- -------- - -------------- ------------------------ ------------------------------------ -- ---------- --- ---------- -------------- -- ------ ----- --------- - -
注册路由:
------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ----- ------- ------ - - - ----- --- ---------- ------- ----------- ------------ -- - ----- -------- ------------- -- -- ------------------------------------- -- -------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
主题
angular-cyanez-starter
内置了多套配色方案。在 styles.scss
中引入主题即可生效。
------- ------------------------------------------ -------- ----------- -------------- ----------------------- ------------ ------------------------ -------------- ------------------------------------- ------------- -------- ----------------------------
组件库
angular-cyanez-starter
使用 Angular 官方提供的Material2
组件库作为基础样式库。在 pages.module.ts
中引入即可使用。
------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - --------------- - ---- --------------------------- ------ - ------------- - ---- ------------------------- ------ - -------------- - ---- -------------------- ------ - ------------- - ---- ------------------------ ------ - ------------------ - ---- ------------------------- ----------- ------------- - --------------- -------------- -- -------- - ------------- ---------------- -------------- ------------------- - -- ------ ----- ----------- - -
打包
angular-cyanez-starter
内置了多种打包优化功能。
在 angular.json
中配置:
- ----------- - --------- - ------------ - -------- - ---------- ---------------------------------------- ---------- - ------------- -------------- -------- ----------------- ------- -------------- ------------ ------------------- ----------- ------------------------ --------- - ------------------ ------------ -- --------- - ----------------- -- ---------- -- -- ----------------- - ------------- - ------------------- - - ---------- ---------------------------------- ------- -------------------------------------- - -- --------------- ----- ---------------- ------ ------------ ------ ------------- ----- -------------- ------ ------ ----- ------------------ ----- -------------- ------ ----------------- ---- - - - - - - -
运行 ng build --prod
即可进行打包。
示例代码
------- ----------------- --------------------- --------------
总结
通过以上步骤,我们已经将 angular-cyanez-starter
集成到我们的 Angular 应用中,并学习了如何使用组件库和进行打包优化。通过这些实践,我们可以更好的掌握 Angular 技术并提高项目开发效率。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005544481e8991b448d1947