项目:快捷列表 - 第二课:准备工作

优质
小牛编辑
158浏览
2023-12-01

本课中山我们在旅程继续之前需要的一些准备工作。我们当然是要生成应用,我们当然也要设置好所有组件和需要用到的Cordova插件。
在开始创建新应用之前的首要工作是确定你是否是最新的Ionic和Cordova版本,如果你最近没有做过的话,那么在继续之前运行一下以下命令:

  1. npm install -g ionic cordova

或者

  1. sudo npm install -g ionic cordova

如果你在安装Ionic或者生成新项目的时候遇到任何问题,请先确定一下你安装了最新版本的Node。安装完成之后,如果你要重新安装一遍的话,那么请先运行以下命令:

  1. npm uninstall -g ionic npm cache clean

生成一个新应用

我们将使用空白开始模板(blank starter template)也就是生成一个空的Ionic项目。它会生成一个内置的页面叫做home,也就是我们的主页,下一课里面用于持有检查列表。
> 运行如下命令生成一个新项目

  1. ionic start quicklists blank --v2

> 通过如下命令将项目目录作为当前目录

  1. cd quicklists

这样,你的新项目就生成了 — 你就可以在你喜欢的编辑器里面打开这个项目了。运行如下命令可以预览你生成的应用:

  1. ionic serve

现在你应该可以看到以下画面:
空白应用

创建需要的组件

这个应该需要用到总共3个页面组件。我们有HomePage用来展示所有检查列表的列表,一个IntroPage用来展示介绍手册,一个ChecklistPage用来展示指定检查列表的列表项。我们已经有了Home页面,所以我们只需要创建其他的两个就可以了。
> 运行如下命令生成介绍页面:

  1. ionic g page Intro

> 运行如下命令生成列表详情页面:

  1. ionic g page Checklist

创建需要的服务

我们创建一个数据服务。他将用于操作保存检查列表数据到存储和从存储中获取数据。
> 运行如下命令生成数据提供者:

  1. ionic g provider Data

创建数据模型

我们将要给我们的检查列表创建数据模型,以允许我们更简单的创建和更新数据。不幸的是,没有可以用来生成数据模型的命令,我们得手动创建。
> 在src文件夹内创建一个的文件夹名为models
> 在models文件夹内新建一个文件名为checklist-model.ts