开始使用
Ng-Matero 是基于 Angular Material 组件库开发的项目,所以你需要了解 TypeScript 及 Sass 的基础知识。

安装

使用 CLI 初始化项目是最便捷的方式,通过初始化选项可以定制主题样式等。详情查看 添加项目
1
$ ng new <project-name>
2
$ cd <project-name>
3
$ ng add ng-matero
Copied!
除了 CLI 安装方式之外,也可以克隆 Starter 仓库,不过 Starter 只有侧边栏一种布局样式。
1
$ git clone --depth=1 [email protected]:ng-matero/starter.git <project-name>
2
$ cd <project-name>
3
$ npm install
Copied!

本地开发

建议使用 hmr 运行程序,不要使用 npm start 或者 ng serve
1
$ npm run hmr
Copied!
克隆完整仓库
1
$ git clone [email protected]:ng-matero/ng-matero.git
2
$ cd ng-matero
3
$ npm install
4
$ npm run hmr
Copied!
打开浏览器访问 http://localhost:4200/

项目目录

1
├── src
2
│ ├── app
3
│ │ ├── core
4
│ │ │ ├── bootstrap # 初始化相关服务
5
│ │ │ │ ├── menu.service.ts # 菜单配置
6
│ │ │ │ ├── settings.service.ts # 页面布局配置
7
│ │ │ │ └── startup.service.ts # 初始化项目配置
8
│ │ │ ├── interceptors # HTTP 拦截器
9
│ │ │ │ └── default.interceptor.ts
10
│ │ │ │── core.module.ts # 核心模块
11
│ │ │ │── **
12
│ │ │ └── settings.ts # 布局配置选项
13
│ │ ├── routes
14
│ │ │ ├── **
15
│ │ │ ├── routes-routing.module.ts # 业务路由注册口
16
│ │ │ └── routes.module.ts # 业务路由模块
17
│ │ ├── shared
18
│ │ │ |—— **
19
│ │ │ └── shared.module.ts # 共享模块
20
│ │ ├── theme
21
│ │ │ ├── admin-layout # Admin 布局
22
│ │ │ ├── auth-layout # 登陆注册布局
23
│ │ │ ├── style # 核心主题样式
24
│ │ │ ├── style.scss
25
│ │ | └── theme.module.ts # 主题模块
26
│ │ ├── app.component.ts # 根组件
27
│ │ ├── app.module.ts # 根模块
28
│ │ └── material.module.ts # Material 组件模块
29
│ ├── assets # 本地静态资源
30
│ ├── environments # 环境变量配置
31
│ ├── styles # 业务相关样式目录
32
│ │ ├── grid # 响应式布局类
33
│ │ ├── helpers # 工具类
34
│ │ ├── plugins # 第三方库样式
35
│ │ ├── **
36
│ │ ├── _app-theme.scss
37
│ │ └── themes.scss # 主题样式配置文件
38
└── └── styles.scss # 样式主入口文件
Copied!
目录结构遵循 Angular 风格指南,同时也是为了方便 CLI 添加业务模块,后期可能还有微调。

项目运行

项目运行后默认执行 startup.service,项目启动前的一些关键信息,比如菜单、用户信息等,都可以写在 startup.service 中。
Last modified 11mo ago