angular17+ionic7集成开发

1、需求背景

因部门要求使用angular作为基础的前端框架,也因为近期需要搭建一套新的移动端H5,故此有采用angular17+ionic7集成搭建项目。

2、搭建步骤

  • 环境安装

本地开发环境需要需要安装以下版本:

node 20.9.0

angular-cli 17.2.2

ionic-cli 7

bash 复制代码
## 先版本采用cli方式安装
npm i -g @ionic/cli@7

## 安装angular脚手架
npm i -g @angular-cli@17.2.2
  • 搭建NG-ZORRO-MOBILE移动端项目

地址:NG-ZORRO-MOBILE - Ant Design Mobile Of Angular根据ng-zorro-mobile官方网站的Ionic中使用章节介绍步骤:NG-ZORRO-MOBILE - Ant Design Mobile Of Angular

bash 复制代码
ionic start your project name
bash 复制代码
ng add ng-zorro-antd-mobile@10.0.0

如果采用ng add ng-zorro-antd-mobile方式,则会自动帮你添加ng所需要的各种配置或者包了。

但是需要注意的是:\src\app\app.component.html的页面内容需要修改回来:

html 复制代码
<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

如果采用npm install ng-zorro-antd-mobile --save方式,则需要自行配置:

(1)app.modules.ts 中,全局引入 ng-zorro-antd-mobile。

(2)angular.json 中,全局引入 ng-zorro-antd-mobile样式。

bash 复制代码
npm install ng-zorro-antd-mobile --save
  • 运行项目
bash 复制代码
ionic serve

按照以上即可搭建一个完整的项目了。

3、图标使用

如果你觉得两个UI框架的图标都不太满意,但是自身又不会UI画图切图的话,那么可以使用阿里的图标矢量图:iconfont-阿里巴巴矢量图标库

相关推荐
非凡ghost6 小时前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost6 小时前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller6 小时前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户904706683576 小时前
commonjs的本质
前端
Sailing7 小时前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
Pa2sw0rd丶7 小时前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
非凡ghost7 小时前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端
j七七7 小时前
5分钟搭微信自动回复机器人5分钟搭微信自动回复机器人
运维·服务器·开发语言·前端·python·微信
快起来别睡了7 小时前
TypeScript装饰器详解:像搭积木一样给代码加功能
前端·typescript
OpenTiny社区7 小时前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js