Nebular 安装指南：使用 Angular CLI 与手动两种方式完成主题库接入配置

前端UI组件【免费下载链接】nebular:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode项目地址https://gitcode.com/gh_mirrors/ne/nebular点击查看免费下载Nebular 是一套基于 Eva Design System 的可定制 Angular UI 组件库本指南讲解在其当前仓库nebular/theme17.x中完成安装的两种主流方式通过 Angular Schematics 的ng add一键接入以及在已有 Angular 工程中手动安装依赖、配置模块与样式。读完本文后你将掌握 Nebular 主题模块、图标包、认证与安全模块的完整接入流程并能根据项目情况选择预编译 CSS 或可定制 SCSS 主题方案。安装方式概览Nebular 提供两条接入路径均以“已存在或即将创建的 Angular 应用”为前提方式适用场景关键命令Angular CLI推荐新项目或已有项目快速接入由 Schematics 自动完成依赖、模块、样式与布局骨架配置ng add nebular/theme手动安装已有 Angular 应用希望精确控制每一步的改动npm install --save nebular/theme angular/cdk angular/animations如果你完全没有代码基础建议先参考 Angular CLI 官方文档创建应用如果你想基于 ngx-admin 启动模板起步则可以阅读 基于 Starter Kit (ngx-admin) 安装 一文。本文只讲解如何将 Nebular 模块装入你自己的工程不含 ngx-admin 专属的自定义组件如 Temperature Widget、Dashboard 图表等——若你需要复用这些组件请先按本文完成 Nebular 接入再拷贝所需组件到项目并注册到对应模块中。方式一使用 Angular CLI 接入推荐安装 Angular CLINebular 官方强烈推荐使用angular/cli开发 Angular 应用全局安装命令如下npm install -g angular/cli创建新项目使用 Angular CLI 创建全新工程ng new my-new-project执行 ng add 完成接入Nebular 支持通过 Angular Schematics 完成初始化配置只需一条命令即可完成整个接入流程ng add nebular/theme执行完毕后 Nebular 即可投入使用。从当前仓库的 Schematics 实现ng-add 入口可以看出这条命令背后实际完成的工作远比“加一个依赖”多写入 peer 依赖installMainPeerDependencies会读取项目已有的angular/core、angular/cli版本向package.json写入angular/animations、angular/cdk、nebular/theme、nebular/eva-icons等依赖自动安装通过NodePackageInstallTask触发npm install顺序执行后续 Schematics安装完成后依次运行post-install与setupsetupsetup.ts再链式执行模块注册、主题注册、根组件布局包裹三个步骤。之所以拆成“先安装再配置”是因为后续的setup步骤内部依赖angular/cdk/schematics与schematics/angular工具包必须先安装完成才能运行。ng add 支持的配置选项ng add nebular/theme并非“一键到底”它支持通过交互式提示或命令行参数控制安装行为。可配置项定义在 schema.json选项可选值默认值作用project字符串当前项目名指定要配置的 Angular 项目themedefault/dark/cosmic/corporatedefault要安装的视觉主题customization布尔值true使用可定制 SCSS 主题还是引入预编译 CSSlayout布尔值true是否将根组件模板包裹进nb-layoutanimations布尔值true是否配置 Angular 浏览器动画模块例如直接指定暗色主题并跳过布局包裹ng add nebular/theme --theme dark --layout false安装过程实际修改了什么结合 模块注册实现 与 主题注册实现ng add会对你的工程做如下改动动画模块在根模块导入BrowserAnimationsModule来自angular/platform-browser/animations若项目已显式使用NoopAnimationsModule则跳过并打印警告避免运行时冲突Nebular 模块向根模块导入NbThemeModule.forRoot({ name: 主题名 })、NbLayoutModule与NbEvaIconsModule路由模块若工程尚未导入RouterModule或AppRoutingModule会自动生成app-routing.module.ts并注册主题样式开启customization时生成themes.scss并在styles.scss中注入use themes与nebular/theme/styles/globals关闭时则把node_modules/nebular/theme/styles/prebuilt/theme.css写入angular.json的 styles 数组且会校验避免重复引入其他 Nebular 主题布局骨架layout为true时将AppComponent的模板内联或 HTML 文件均可包裹进nb-layout/nb-layout-header/nb-layout-column/nb-layout-footer结构中见 wrap-in-layout 实现这是 Nebular 组件正常工作的前提。上述行为均有对应测试用例覆盖可参考 ng-add 测试其中验证了themes.scss与styles.scss的期望生成内容。方式二手动安装如果你希望在已有 Angular 应用中逐步、可控地接入 Nebular可按照以下步骤操作。此方式假设你已经创建好了一个 Angular 应用。安装 Nebular 模块npm install --save nebular/theme angular/cdk angular/animations从 nebular/theme 的 package.json 可以看到nebular/theme将angular/animations、angular/common、angular/core、angular/router、angular/cdk与rxjs声明为 peerDependencies因此手动安装时需保证这些包的版本与当前仓库的 17.x 版本声明对应 Angular 21兼容npm install会自动校验并在缺失时给出提示。安装图标包推荐从 Nebular 4.0 起Eva Icons 是官方推荐的 SVG 图标库可一并安装npm install --save eva-icons nebular/eva-iconsnebular/eva-icons模块的用法细节可参考仓库内的 eva-icons README 及 图标组件目录。安装认证与安全模块可选若你的应用需要登录认证与访问控制可额外安装npm install --save nebular/auth nebular/security认证模块的完整概念与安装说明见 Auth 模块简介 与 Auth 安装指南。配置 Nebular在应用根模块app.module.ts中引入主题模块import { NbThemeModule } from nebular/theme; // ... NgModule({ imports: [ // ... // 默认启用 default 主题传入 { name: dark } 可启用暗色主题 NbThemeModule.forRoot(), ], }) export class AppModule {}从 NbThemeModule 实现 可以看出forRoot()的完整签名是static forRoot( nbThemeOptions: NbThemeOptions { name: default }, nbJSThemes?: NbJSThemeOptions[], nbMediaBreakpoints?: NbMediaBreakpoint[], layoutDirection?: NbLayoutDirection, ): ModuleWithProvidersNbThemeModule第一个参数nbThemeOptions控制启用的主题名内置可选值为default、dark、cosmic、corporate该方法同时注册主题服务、断点服务、滚动与标尺服务、方向服务、Spinner、Status 服务以及 Overlay 模块的 providers并把主题选项通过NB_THEME_OPTIONS令牌提供给全局依赖注入forRoot()只应在根模块调用一次子模块中通常无需再次调用。安装样式接下来为工程引入 Nebular 的全局样式。最简单的做法是在angular.json的styles数组中加入预编译主题 CSSstyles: [ node_modules/nebular/theme/styles/prebuilt/default.css ]将default.css换成dark.css即可启用暗色主题。仓库 prebuilt 样式目录 中共有 9 个文件覆盖四个内置主题及其 Custom Properties 变体主题预编译 CSSdefaultdefault.css、default-custom-properties.cssdarkdark.css、dark-custom-properties.csscosmiccosmic.css、cosmic-custom-properties.csscorporatecorporate.css、corporate-custom-properties.css这些文件的发布路径均在 nebular/theme package.json 的 exports 声明 中予以导出。可定制主题SCSS 进阶方案本文描述的是基础样式安装。如果你需要更高级的特性——比如自定义主题变量或运行时在多个主题间切换——建议参考 启用可定制主题 与 多运行时主题 两篇文章。可定制方案要求项目启用 SCSSng add在非 SCSS 工程中启用customization时会直接抛出“Customizable theme requires scss”异常。ng add生成的themes.scss骨架如下forward nebular/theme/styles/theming; use nebular/theme/styles/theming as *; use nebular/theme/styles/themes/default; $nb-themes: nb-register-theme(( // 在这里添加你的自定义变量例如 // color-primary-100: #f2f6ff, // color-primary-500: #3366ff, // color-primary-900: #091c7a, ), default, default);同时styles.scss会被注入全局样式安装代码use themes as *; use nebular/theme/styles/globals as *; include nb-install() { include nb-theme-global(); };nb-install()与nb-theme-global()是 Nebular 样式体系提供的 Sass 入口负责将注册的主题变量安装为组件可用的全局样式是定制主题工作的基础。安装后的下一步完成上述任意一种安装后即可着手创建你的第一个 Nebular 页面可参考 创建 Nebular 页面随后按需选用 主题组件 目录下的各类 UI 组件按钮、卡片、表单、表格、对话框等组件示例可直接参考 playground 示例代码。注意事项与常见问题ngx-admin 自定义组件本指南只解决 Nebular 模块的安装ngx-admin 的自定义组件如温度小部件、仪表盘图表需要按本文完成接入后手动拷贝并注册到你的模块中动画模块冲突若工程已显式使用NoopAnimationsModuleng add不会自动覆盖而会提示手动配置BrowserAnimationsModule主题重复引入ng add与手动配置都会校验angular.json中是否已存在其他nebular/theme/styles/prebuilt样式避免同一主题被重复引入版本兼容手动安装时务必保证angular/cdk、angular/animations等 peer 依赖版本与nebular/theme当前版本声明一致具体以仓库中 package.json 为准。赞分享前端UI组件【免费下载链接】nebular:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode项目地址https://gitcode.com/gh_mirrors/ne/nebular点击查看免费下载相关推荐找回QQ空间历史说说GetQzonehistory完整指南找回QQ空间历史说说GetQzonehistory完整指南 开篇·当最老的说说没有了下文 深夜你把QQ空间说说的翻页拉到底发现2015年之后就没了下文——网页爬虫数据分析devin.cursorrules配置详解Cookiecutter vs 手动安装两种方法devin.cursorrules配置详解Cookiecutter vs 手动安装两种方法 想要将你的Cursor编辑器升级为类似Devin的AI助手吗de人工智能AI Agent代码智能体Gel CLI 安装完全指南六种官方安装方式与使用验证Gel CLI 安装完全指南六种官方安装方式与使用验证 本篇技术指南基于 install_table.rst https://link.gitcode.com数据库图数据库关系型数据库上一篇如何快速掌握Video DownloadHelper CoApp新手入门完整指南下一篇WarcraftHelper3分钟让经典魔兽争霸3完美适配现代电脑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考