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.1
                                
     The package name has changed from ionic to @ionic/cli!
                                
             To update, run: npm uninstall -g ionic
                 Then 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-docs
        
        Error: 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学习之项目构建)