angular+ionic学习之项目构建

前端时间学习了ionic5+angular12，做一次学习记录，对这阶段学习做一个总结。

安装ionic

本地全局安装

npm install -g ionic
或
// 用tabobao镜像装会快些
cnpm install -g ionic

安装完毕后，查看是否安装成功。

ionic -v

xxxxMacBook-Pro:~ xxxx$ ionic -v
5.4.16────────────────────────────────────────────────────────────Ionic CLI update available: 5.4.16 → 6.18.1The package name has changed from ionic to @ionic/cli!To update, run: npm uninstall -g ionicThen run: npm i -g @ionic/cli────────────────────────────────────────────────────────────

出现版本信息，即为安装成功。

创建项目

执行

ionic start myDemo

如上，我在本地创建了一个ionic+angular的空白项目，项目名为myDemo，创建完毕会自动下载依赖。

注意

在执行ionic start创建项目时可能会出现下面报错：

[ERROR] Network connectivity error occurred, are you offline?If you are behind a firewall and need to configure proxy settings, see:https://ion.link/cli-proxy-docsError: getaddrinfo ENOTFOUND d2ql0qc7j8u4b2.cloudfront.net
⠋ Downloading and extracting blank starter

初步判断原因：

可能是国内镜像的原因

解决办法：

用以下命令创建项目，不会下载依赖。

ionic start myDemo --no-deps

项目创建好后，再执行下面命令下载依赖。

npm install
或
cnpm install

项目主要目录介绍

后缀名为.spec.ts的文件是自动生成的测试文件，我项目中用不到，一般都删除了。

项目启动命令

npm start
或
npm run start

浏览器出现以下页面，则项目成功搭建了。

开发快捷命令

新建页面

 ionic g page 页面名称

新建组件

ionic g component components/组件名称

新建路由守卫

ng generate guard 文件名

或者

ionic g

ionic或者angular cli构建的项目，目录差不多。
如果之前有学过TS和vue的话，这个上手应该蛮快的。

angular+ionic学习之项目构建相关推荐

Maven学习：项目构建生命周期
图1 maven对项目构建的生命周期划分为三个阶段可以比喻成婴儿时期,成年人时期,和老年时期. 成年人时期(default)做的事情最多,任务也基本上都处于这个阶段. 图2 Clean要干的事情如图 ...
Angular 14微前端项目构建
前景知识命令 How to create a new remote using Angular CLI? (Webpack 5 Module Federation micro frontends) n ...
深度学习（五十六）tensorflow项目构建流程
tensorflow项目构建流程博客:http://blog.csdn.net/hjimce 微博:黄锦池-hjimce qq:1393852684 一.构建路线个人感觉对于任何一个深度学习库 ...
Maven学习总结（2）——Maven项目构建过程练习
Maven学习总结(二)--Maven项目构建过程练习上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项目的过程一.创建Maven项目 1.1.建 ...
Maven学习总结(二)——Maven项目构建过程练习
2019独角兽企业重金招聘Python工程师标准>>> Maven学习总结(二)--Maven项目构建过程练习上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验 ...
python项目构建_通过构建4个项目来学习Python网络
python项目构建 The Python programming language is very capable when it comes to networking. We've releas ...
Gradle学习(二十)——多项目构建详解
跨项目配置虽然子项目之间可以完全隔离单独配置,但是子项目直接有相同特征的情况也是很常见的,多个项目共享配置是更好的选择. 配置和执行在gradle学习-十八-构建的生命周期这一篇中我们已经讲过Gr ...
Java初级项目学习第一讲：Maven项目构建
Maven项目构建一.什么是Maven Maven这个单词来自于意第绪语(犹太语),意为知识的积累.Apache Maven是一个(特别是Java编程)项目管理及自动构建工具,由Apache软件基金 ...
angular基础学习
angular基础学习核心一. angular环境搭建 1. 安装前准备: 1.1 安装nodejs 1.2 安装 cnpm, 尽量不要使用 1.3 使用npm/cnpm命令安装angular/c ...