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
2
3
4
5
6
|
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
2
3
4
5
6
7
8
|
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
1
|
下载(https: //www.python.org/downloads/release/python-2711/)并安装
|
-
安装NodeJS
1
|
下载(https: //nodejs.org/en/)并安装
|
-
安装Cordova和Ionic
1
|
npm install -g cordova ionic |
如果因为网络原因,安装失败。可以尝试使用taobao镜像(http://npm.taobao.org)
1
2
3
4
5
6
7
8
9
|
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 <br>注意:需要修改环境变量, 从 C:\Documents and Settings\user\Application Data\npm 改为 C:\Documents and Settings\user\Application Data\npm\bin |
-
创建应用
1
|
ionic start myapp tabs |
-
启动应用
1
|
ionic serve |
-
添加平台
1
|
ionic platform add android<br>ionic platform add ios |
-
查看已经安装的plugin
1
|
ionic plugin ls |
转自:http://www.cnblogs.com/allanli/p/ionic_windows_setup.html
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
补充
- 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 install -g ionic cordova
b. 进入你要创建项目的路径:
- cd E:\Study\Android\ionic\Project
- e:
- ionic start myApp tabs
- cd myApp
- ionic platform add android
- ionic build android
- ionic emulate android
其中f和g可以合并为:
- ionic run android
即生成apk,并在模拟器或真机中模拟。
4.更新ionic等
a.更新cordova及ionic包
- npm update -g cordova ionic
- ionic lib update
5.展现ionic项目结果(显示在ios和android上的样式)
- ionic serve --lab
6.查看ionic版本(当前最新版本为1.2.13)
- ionic -v