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

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

相关推荐