介绍
angular-cyanez-starter 是一个为 Angular 应用提供的快速启动模板。包含了 Angular 常用依赖、组件库和工具链, 并且支持一键打包、压缩等多种优化功能。
安装
使用 npm 安装：
npm install -g @angular/cli ng new my-app --style scss --routing --skip-tests cd my-app npm install @cyanez/angular-cyanez-starter --save
使用
在 app.module.ts 中导入：
-- -------------------- ---- -------
------ - ----------------------- - ---- ---------------------------------------
------ - -------------------------- - ---- ---------------------------------
-----------
------------- -
-------------
--
-------- -
--------------
------------------------
------------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -注册路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ----- ------- ------ - - - ----- --- ---------- ------- ----------- ------------ -- - ----- -------- ------------- -- -- ------------------------------------- -- -------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
主题
angular-cyanez-starter 内置了多套配色方案。在 styles.scss 中引入主题即可生效。
@import '~@cyanez/angular-cyanez-starter/theming'; @include mat-core(); $cyan-palette: mat-palette($mat-cyan); $cyan-theme: $mat-elevation-z2-theme; $cyanez-theme: mat-define-light-theme($cyan-palette, $cyan-theme); @include cyanez-theme($cyanez-theme);
组件库
angular-cyanez-starter 使用 Angular 官方提供的Material2组件库作为基础样式库。在 pages.module.ts 中引入即可使用。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - -------------- - ---- --------------------
------ - ------------- - ---- ------------------------
------ - ------------------ - ---- -------------------------
-----------
------------- -
---------------
--------------
--
-------- -
-------------
----------------
--------------
-------------------
-
--
------ ----- ----------- - -打包
angular-cyanez-starter 内置了多种打包优化功能。
在 angular.json 中配置：
-- -------------------- ---- -------
-
----------- -
--------- -
------------ -
-------- -
---------- ----------------------------------------
---------- -
------------- --------------
-------- -----------------
------- --------------
------------ -------------------
----------- ------------------------
--------- -
------------------
------------
--
--------- -
-----------------
--
---------- --
--
----------------- -
------------- -
------------------- -
-
---------- ----------------------------------
------- --------------------------------------
-
--
--------------- -----
---------------- ------
------------ ------
------------- -----
-------------- ------
------ -----
------------------ -----
-------------- ------
----------------- ----
-
-
-
-
-
-
-运行 ng build --prod 即可进行打包。
示例代码
<button mat-raised-button color="primary">Hello World</button>
总结
通过以上步骤，我们已经将 angular-cyanez-starter 集成到我们的 Angular 应用中，并学习了如何使用组件库和进行打包优化。通过这些实践，我们可以更好的掌握 Angular 技术并提高项目开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005544481e8991b448d1947