ionic环境搭建

Linux下搭建ionic

ionic是目前比较火的hybird框架学的人挺多所以资料会相对全一些.

cordova是一个连接ionic和原生android 底层api的工具.(这样说好理解一些,不过可能不够准确.)

用他们的好处

跨平台可以在ios android 平台上使用

(其他具体内容请百度/google/)

下面就开始吧

 

别问我为什么不是在windows下配置的,我头疼!(在windows下配置各种全局变量搞不定,还是linux下好用)

(我用的是deepin linux跟ubuntu关系密切所以使用的命令也跟ununtu一样)

如果你的jdk环境是搭好的,要做的就是下面的工作

1.首先需要安装nodejs 并配置全局变量

2.安装cordova 并配置全局变量

3.安装 ionic 配置全局变量,并且配置android环境变量

 

一. linux 下安装nodejs 比较简单从官网下载linux版本压缩包

官网:https://nodejs.org/en/

解压缩后文件夹内有个bin文件

用ln -s 命令将bin文件下的文件软连接到 /usr/bin/ 下面

cp -r node-v4.2.2-linux-x64 /opt/nodejs //先将文件夹拷贝一份到/opt/目录下
sudo ln -s /opt/nodejs/bin/node /usr/bin/node //软连接bin下的node 文件到 /usr/bin/ 下
sudo ln -s /opt/nodejs/bin/npm /usr/bin/npm //同上

测试下:(任意目录下打开终端输入下面内容)

出现版本号就是成功了.

二. 使用npm 安装cordova 和 ionic

使用命令:

也可以cordova 和 ionic 一起装

ionic 方法同上.

安装完成后

任意目录下输入cordova 发现并不能用

需要使用 ln -s 命令软连接到 /usr/bin/ 下才能使用方法跟上面一样. (注意 路径一定要写绝对路径)

安装好的cordova目录在 这里

软连接执行后.

测试下:

出现版本号就行了

同样使用命令:

sudo install  -g ionic

使用 ln -s 软连接

方法同上.

测试下:

到这里环境就算搭好了.

下面就要创建一个项目试下了

第一次安装会安装很多依赖包.会比较慢

还有这样的报错:

是因为android环境没配好.

解决办法有两种:

1.配置环境变量,可以百度

2.通过软连接 ln -s 方法把/sdk/tools/android 连接到 /usr/bin/ 下

这样就算完成了.

(上面是默认你已经安装好了android 开发环境 我用的是android studio .如果使用eclipse 请再配置一下ant)

转自：http://www.cnblogs.com/wobeinianqing/p/5545208.html

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Windows下搭建ionic

下面是在windows操作系统上面安装ionic的步骤，已经在Windows 10/ 7/ XP下面通过验证。

• 安装JDK

1.1 下载（http: //www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html）并安装
1.2 配置：高级->环境变量
JAVAHOME: C:\Program Files\Java\jdk1.7.0_25
Path: C:\Program Files\Java\jdk1.7.0_25\bin
CLASSPATH: .
1.3 运行：cmd->javac or java –version正常显示内容说明安装成功

• 安装Android SDK

1.1 安装（下载地址http: //tools.android-studio.org/index.php/sdk）
1.2 打开Android SDK Manager，安装最新的SDK
1.3 配置环境变量
Path:
C:\Program Files\Android\android-sdk\tools
C:\Program Files\Android\android-sdk\platform-tools

1.4 运行：adb, 正常显示内容说明安装成功

• 安装Python 2.7

下载（https: //www.python.org/downloads/release/python-2711/）并安装

• 安装NodeJS

下载（https: //nodejs.org/en/）并安装

• 安装Cordova和Ionic

npm install -g cordova ionic

  如果因为网络原因，安装失败。可以尝试使用taobao镜像（http://npm.taobao.org）

npm config set registry " https://registry.npm.taobao.org "
npm install -g cnpm --registry=https: //registry.npm.taobao.org
cnpm install -g cordova
cnpm install -g ionic
注意：需要修改环境变量，
从
C:\Documents and Settings\user\Application Data\npm
改为
C:\Documents and Settings\user\Application Data\npm\bin

• 创建应用

ionic start myapp tabs

• 启动应用

ionic serve

• 添加平台

ionic platform add androidionic platform add ios

• 查看已经安装的plugin

ionic plugin ls

• 安装plugin

• 推荐的模拟环境：Ionic Lab

转自：http://www.cnblogs.com/allanli/p/ionic_windows_setup.html

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

补充

1.准备工作

    下载 Node.js（下载包），WebStorm（IDE，编写代码，浏览器调试）,JDK（webstorm 运行环境），Android SDK (Android编译)

    不一定有时间回复各位的问题，最好加QQ群讨论：245285768

2.配置环境变量：

ANDROID_HOME    D:\Program Files\adt\sdk                              （对应sdk路径）
       path     %ANDROID_HOME%\platform-tools;
       path     %ANDROID_HOME%\tools;

3.安装ionic等，运行命令提示符（管理员） 输入

    a. 将cordova和ionic包安装到全局环境中（可供命令行使用）：

npm install -g cordova ionic

   

              注：由于GFW，很多插件下载不下来，我们可以使用淘宝镜像来解决这个问题：

npm install -g cnpm --registry=https://registry.npm.taobao.org

              安装完成后，以后所有的插件都使用 cnpm 这个命令来进行安装。

cnpm install -g ionic cordova

    b. 进入你要创建项目的路径：

cd E:\Study\Android\ionic\Project
e:

    c. 创建一个名为myApp的还有tabs的项目（ionic start <project-name> <optional-template>） 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白）:

ionic start myApp tabs

    d. myApp就为项目名称,进入myApp这个文件夹:

cd myApp

    e. 添加android平台:

ionic platform add android

    f. 生成androidapk:

ionic build android

    g. 在android模拟器或真机中模拟:

ionic emulate android

   其中f和g可以合并为：

ionic run android

    即生成apk，并在模拟器或真机中模拟。

4.更新ionic等

    a.更新cordova及ionic包

npm update -g cordova ionic

    b.更新已建ionic项目中的js类库，命令行中先进入项目所在目录，然后运行：

ionic lib update

5.展现ionic项目结果（显示在ios和android上的样式）

ionic serve --lab

6.查看ionic版本（当前最新版本为1.2.13）

ionic -v

   

转自：http://blog.csdn.net/zapzqc/article/details/41802453