项目:快捷列表 - 第二课:准备工作
优质
小牛编辑
158浏览
2023-12-01
本课中山我们在旅程继续之前需要的一些准备工作。我们当然是要生成应用,我们当然也要设置好所有组件和需要用到的Cordova插件。
在开始创建新应用之前的首要工作是确定你是否是最新的Ionic和Cordova版本,如果你最近没有做过的话,那么在继续之前运行一下以下命令:
npm install -g ionic cordova
或者
sudo npm install -g ionic cordova
如果你在安装Ionic或者生成新项目的时候遇到任何问题,请先确定一下你安装了最新版本的Node。安装完成之后,如果你要重新安装一遍的话,那么请先运行以下命令:
npm uninstall -g ionic npm cache clean
生成一个新应用
我们将使用空白开始模板(blank starter template)也就是生成一个空的Ionic项目。它会生成一个内置的页面叫做home,也就是我们的主页,下一课里面用于持有检查列表。
> 运行如下命令生成一个新项目
ionic start quicklists blank --v2
> 通过如下命令将项目目录作为当前目录
cd quicklists
这样,你的新项目就生成了 — 你就可以在你喜欢的编辑器里面打开这个项目了。运行如下命令可以预览你生成的应用:
ionic serve
现在你应该可以看到以下画面:
创建需要的组件
这个应该需要用到总共3个页面组件。我们有HomePage用来展示所有检查列表的列表,一个IntroPage用来展示介绍手册,一个ChecklistPage用来展示指定检查列表的列表项。我们已经有了Home页面,所以我们只需要创建其他的两个就可以了。
> 运行如下命令生成介绍页面:
ionic g page Intro
> 运行如下命令生成列表详情页面:
ionic g page Checklist
创建需要的服务
我们创建一个数据服务。他将用于操作保存检查列表数据到存储和从存储中获取数据。
> 运行如下命令生成数据提供者:
ionic g provider Data
创建数据模型
我们将要给我们的检查列表创建数据模型,以允许我们更简单的创建和更新数据。不幸的是,没有可以用来生成数据模型的命令,我们得手动创建。
> 在src文件夹内创建一个的文件夹名为models
> 在models文件夹内新建一个文件名为checklist-model.ts