Ionic 2 教程

现在您已经安装好了 Ionic 及其依赖项,您可以构建您的第一个应用程序 ! 本节将指导您完成开始一个新的应用程序,添加页面,这些页面之间导航等等的过程。让我们开始吧!

Ionic 使用 TypeScript 来进行编码工作. 如果您不熟悉 TypeScript , 看看 这个页面

创建一个新的 Ionic 2 App

创建一个新的 App 非常容易，打开您的命令提示行工具（cd 到您要创建项目的文件夹下），然后运行下面的命令：

$ ionic start MyIonic2Project tutorial --v2
  • start 会告知 CLI 创建一个新的 App.
  • MyIonic2Project 是一个文件夹名称 也是 您项目 App 的名称.
  • tutorial 将为创建一个带有官方教程模板 turtorial 的项目.
  • --v2 告知 CLI 您是要创建一个 Ionic 2.0 的项目，不加的话就是创建 Ionic 1.0 的项目.

随着您项目的创建,这也将为您的程序安装一些 npm 模块,并获得 Cordova 程序和准备开发。

如果 tutorial 模板没有您想看的一些东西, Ionic 还提供一些其他的模板

  • tabs: 一个简单的 3 tab 的布局
  • sidemenu: 一个 swipable 菜单布局
  • blank: 只有一个空页面，没有其他的
  • super: 一个超过14 个可以使用的页面来设计的项目
  • tutorial: 一个指导的项目

如果你创建 Ionic 时不指定一个模板，运行命令 ionic start MyIonic2Project --v2,这将使用 tab 模板。

在浏览器中查看您的程序

现在您可以 cd 到前面创建的那个文件夹里（比如这里的 /MyIonic2Project/），为了在浏览器中快速预览您的程序，使用 serve 命令：

$ cd MyIonic2Project/
$ ionic serve

效果如下：

如果一切顺利，您应该看到上面显示的欢迎消息。

在下一节中，让我们通过 ionic start 来复习一下项目结构

results matching ""

    No results matching ""