Ionic 环境搭建和安装教程

Ionic 环境搭建和安装教程

本篇教程基于 Ionic 官方文档编写，希望对初次安装 Ionic 的你们有所帮助。

环境搭建

在使用 Ionic 框架之前，唯一的前提条件是 Node 和 npm 环境。

当然，你同样需要一个代码编辑器。这里推荐使用 VS Code。

Node & npm

安装 Node.js 和 npm

• 下载（推荐下载 LTS 版本）：Node.js
• 安装：双击下载的文件直接安装即可（npm 是和 Node 捆绑安装的，无需单独安装）

• 验证是否安装成功：

  • 打开新的cmd窗口，输入：

    $ node --version
    $ npm --version

  • 出现版本号说明安装成功

安装 Ionic CLI

• 直接在 cmd 中输入下方命令安装：

  $ npm install -g ionic

• 验证是否安装成功：

  $ ionic -v

  出现版本号等信息说明安装成功。

安装 Cordova

• 直接在 cmd 中输入下方命令安装：

  $ npm install -g cordova

• 验证是否安装成功：

  $ cordova -v

  出现版本号信息说明安装成功。

创建项目

这里有三种最常见的启动器可供选择，分别是blank启动器，tabs启动器和sidemenu启动器。需要在指定路径中创建项目的话，使用cd进入指定路径即可，默认为当前路径。

• 直接在cmd中输入下方命令安装：

  $ ionic start myApp tabs

• 耐心等待创建完成，进入对应的文件夹即可看到创建的项目。

运行项目

• 在cmd中cd进入到刚才创建的项目文件夹（myApp）

  $ cd myApp

• 使用ionic serve命令来启动项目

  $ ionic serve

项目启动成功之后会自动在浏览器中打开