IONIC安装过程

小灰灰 2022-06-17 12:54 235阅读 0赞

**ionic 安装过程**

# 安装过程可参考[菜鸟教程][Link 1]以及gitbook上[yanxiaodi][]的[**教程**][Link 2]来安装； #

# 具体操作关键步骤如下： #

可按下面说明按步骤安装，首先必须安装最新版Nodejs以及JDK1.8

# Ø  菜鸟教程： #

![Center][]

以上安装过程中大概率会出现安装失败的情况，也可以把ionic和cordova分开来安装，

若出现安装失败，毕竟资源全部在国外，你懂的；幸好有万能taobao;可直接设置淘宝镜像源，可以使用 cnpm 代替 npm；

设置方式为：npm configset registry " https://registry.npm.taobao.org "(直接修改npm源)

npm config list (查看npm设置)，再通过以上方式安装即可；

# gitbook安装教程（较详细，推荐新手看） #

**ionic安装**

![Center 1][]

**CORdova安装**

**![Center 2][]**

同样安装失败依然设置npm源为淘宝镜像源；

中途可根据自己需要设置node环境变量以及android环境变量

成功安装后，；

# 创建项目： #

打开 Node 命令行，首先cd 到项目目录，使用 start 命令来创建一个新App：

ionic start MyIonic2Project tutorial --v2

这个命令将下载项目模板，安装 `npm modules`，设置 `Cordova` 的相关信息。

如果失败，有可能会出现以下信息：

Creating Ionic app in folder E:\Workspaces\Ionic2\MyIonic2Project based on tutorial project

Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip

[=============================] 100% 0.0s

Downloading: https://github.com/driftyco/ionic2-starter-tutorial/archive/master.zip

[=============================] 100% 0.0s

Installing npm packages...

Error with start undefined

Error Initializing app: There was an error with the spawned command: npminstall

There was an error with the spawned command: npminstall

Caught exception:

undefined

Mind letting us know? https://github.com/driftyco/ionic-cli/issues

这说明 npm 安装的时候失败了，可以 cd 到项目目录，使用之前设置过的 cnpm 命令：cnpm install；

直到最后输出类似以下信息，说明 `npm modules` 安装成功。

All packages installed (319 packages installed from npm registry, use 2m, speed 37.49kB/s, json 659(4MB), tarball 1.07MB)

# 添加Android，IOS平台 #

ionic platform add android

ionic platform add ios

# Build平台 #

ionic build android

ionic build ios

此处可能会报错，错误信息如下；

![Center 3][]![Center 4][]

此处我的处理方式为：去掉之前的淘宝镜像源，build即可成功；（若不成功欢迎补充）

查看之前设置NPM源命令为：npm config list

找到npm源位置然后去掉即可，或者通过命令尝试（未尝试）：npm config set registry ‘’

Build时或许会提示JDK版本不对，替换对应即可；

# Emulate运行（模拟器运行） #

命令：

ionic emulate ios

ionic emulate android

如果一切正常会弹出模拟器，界面如下所示：（界面根据自己项目内容展示）

![Center 5][]

此处若出现问题，一般就是android模拟器或者ios模拟器配置不对或者未创建模拟器，创建即可；

[Link 1]: http://www.runoob.com/ionic/ionic-install.html
[yanxiaodi]: https://www.gitbook.com/@yanxiaodi
[Link 2]: https://yanxiaodi.gitbooks.io/ionic2-guide/content/installation/%E5%AE%89%E8%A3%85Ionic2.html
[Center]: /images/20220617/b25547f0549345e0bfd1c649e82d3b48.png
[Center 1]: /images/20220617/d8a2b0f09b6b466a90ccc0b452d9d3a6.png
[Center 2]: /images/20220617/23e18976b47f4dc18d2e83dd2ac4920f.png
[Center 3]: https://img-blog.csdn.net/20170426171026421?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHVjcDEyMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220617/70afbd7ff5f54ef49ffbfc8ac3def975.png
[Center 5]: /images/20220617/ae864e7d42f447bd9a6597143ccb6af1.png