轻松学习Ionic (一) 搭建开发环境,并创建工程

时间:2021-06-20 03:17:54
1.准备工作
    下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm 运行环境),Android SDK (Android编译)
    不一定有时间回复各位的问题,最好加QQ群讨论:245285768
 
2.配置环境变量:
  1. ANDROID_HOME    D:\Program Files\adt\sdk                              (对应sdk路径)
  2. path     %ANDROID_HOME%\platform-tools;
  3. path     %ANDROID_HOME%\tools;

3.安装ionic等,运行命令提示符(管理员) 输入

a. 将cordova和ionic包安装到全局环境中(可供命令行使用):

  1. npm install -g cordova ionic

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

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

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

  1. cnpm install -g ionic cordova

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

  1. cd E:\Study\Android\ionic\Project
  2. e:

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

  1. ionic start myApp tabs

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

  1. cd myApp

e. 添加android平台:

  1. ionic platform add android

f. 生成androidapk:

  1. ionic build android

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

  1. ionic emulate android

其中f和g可以合并为:

  1. ionic run android

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

4.更新ionic等

a.更新cordova及ionic包

  1. npm update -g cordova ionic

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

  1. ionic lib update

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

  1. ionic serve --lab

6.查看ionic版本(当前最新版本为1.2.13)

  1. ionic -v

轻松学习Ionic (一) 搭建开发环境,并创建工程