移动App开发环境安装

一、环境安装准备软件

二、node的安装

像安装普通软件一样,安装对应版本的node软件,安装好之后就可以运行npm命令行,比如npm init 、npm install -g bower、npm install -g browser 、npm install -g browser-sync、npm install -g gulp  -cli --save --dev 、npm install jquery --save、等等;注意安装路径不要选中文路径,配置文件是package.json

下载地址:https://www.nodojs.org

npm:www.npmjs.org   Node package Manager

bower:http://bower.io

browser-sync:[官网](https://www.browsersync.io/)

[中文网](http://www.browsersync.cn/)

Glup: [官网](http://gulpjs.com/)

[中文网](http://www.gulpjs.com.cn/)

常用Gulp插件

- [编译 Less:gulp-less](https://www.npmjs.com/package/gulp-less)

- [创建本地服务器:gulp-connect](https://www.npmjs.com/package/gulp-connect)

- [合并文件:gulp-concat](https://www.npmjs.com/package/gulp-concat)

- [最小化 js 文件:gulp-uglify](https://www.npmjs.com/package/gulp-uglify)

- [重命名文件:gulp-rename](https://www.npmjs.com/package/gulp-rename)

- [最小化 css 文件:gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css)

- [压缩html文件 gulp-minify-html](https://www.npmjs.com/package/gulp-minify-html)

- [最小化图像:gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)

三、git的安装

git是一个源代码管理工具,安装git主要是开发中的团队协作,方便版本管理.ng-cordova插件需要使用。

git:下载地址git-scm.com/download/

四、jdk的安装

Java Development Kit,这是做java语言运行开发所依赖的工具,就像js语言运行需要浏览器一样

下载地址:

(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)

环境变量配置:

JAVA_HOME,变量值配置为:jdk安装路径(c:/xxx/jdk1.8.0.25)

CLASSPATH,变量值配置为:

.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

*注意最前面有个点*

+ PATH,变量值追加:    %JAVA_HOME%\bin;

>  C:\Users\isc\AppData\Roaming\npm;%JAVA_HOME%\bin;

%JAVA_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

- 输入javac较验

- 或输入java -version

五、Android SDK的安装

Android SDK是Android平台上进行软件开发所需要的开发包,这里我们通过安装Android Studio的方式来安装Android SDK,Android Studio 是Android开发的IDE(集成开发环境)至少是2.0 或者更高版本,我们不是要使用这个IDE,而是要使用它所集成的Android SDK,如果手动下载安装SDK很麻烦。安卓官网被墙[android sdk 中文网站](http://www.androiddevtools.cn/)注意:安装路径不要有中文也不要用空格。

- 环境变量:

+ ANDROID_HOME:变量值配置为sdk安装路径(C:\iscDev\Android\sdk)

+ PATH:变量值追加: ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

此时还要安装cordova和ionic npm install -g cordova ionic

六、Viusal Studio 2015的安装

主要是为了使用该工具所提供的C++环境,这个是最难装的,虽然这个强大的工具我们只是用它的c++环境,目测安装大小10G+。

以上是ionic开发必备的环境,如果要进行React Native开发还需搭建python环境

七、Python的安装

八、运行

安装完以上环境就可以进行移动App开发了,

Ionic开发:

- ionic start myApp tabs

+ 初始化一个项目,tabs可以不写,也可以是/black/sidemenu

- ionic platform add android

+ 添加一个andorid平台,其实是下载android源码

+ 添加一个ios平台 `ionic platform add ios`

- ionic build android

+ 将项目代码编译成 android 安装包

- build 时容易失败多尝试几次

前端移动App开发环境搭建的更多相关文章

  1. Cordova+ionic 开发hybird App --- 开发环境搭建

    Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...

  2. phoneGap+cordova+ionic混合app开发环境搭建

    参考链接:http://www.w2  bc.com/article/177257 待补充

  3. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  4. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

  5. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  6. 使用gulp搭建一个传统的多页面前端项目的开发环境

    1.简介 使用gulp搭建一个传统的多页面前端项目的开发环境 支持pug scss es6编译支持 支持开发环境和打包生成sourceMap 支持文件变动自动刷新浏览器,css是热更新(css改动无需 ...

  7. HTML5 移动应用开发环境搭建及原理分析

    开发环境搭建: 一.Android 开发平台搭建 安装java jdk:\\10.194.151.132\Mewfile\tmp\ADT 配置java jdk 1)  新建系统变量,JAVA_HOME ...

  8. Weex开发之路(1):开发环境搭建

    一.Weex介绍 Weex是阿里巴巴在2016年6月份对外开源的一款移动端跨平台的移动开发工具,Weex的出现让我们的应用既有了Native的性能和H5的动态性,只要通过前端JS语法就能写出同时兼容i ...

  9. 如何学习web开发环境搭建和脚手架

    Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...

随机推荐

  1. 百度MIP移动页面加速——不只是CDN

    MIP是用CDN做加速的么?准确答案是:是,但不只是. MIP全称Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案.MIP从前端渲染和页面网络传输两方面进行优化, ...

  2. ASP.NET Core的路由[3]:Router的创建者——RouteBuilder

    在<注册URL模式与HttpHandler的映射关系>演示的实例中,我们总是利用一个RouteBuilder对象来为RouterMiddleware中间件创建所需的Router对象,接下来 ...

  3. Android N开发 你需要知道的一切

    title: Android N开发 你需要知道的一切 tags: Android N,Android7.0,Android --- 转载请注明出处:http://www.cnblogs.com/yi ...

  4. Entity Framework 教程——DBContext

    DBContext: 在之前的章节<创建实体数据模型>中,EDM为我们创建了SchoolDBEntities 类,它派生子System.Data.Entity.DbContext这个类,这 ...

  5. BPM合同管理解决方案分享

    一.方案概述合同是组织与组织间所订协议的法律 表现形式,体现着双方对于合作在法律和道德上的承诺.然而,大多数企业的合同管理都或多或少存在合同审批过程不规范.签订草率.审批权责不清.合同执行跟踪难.合同 ...

  6. OpenGL ES 3.0: 图元重启(Primitive restart)

    [TOC] 背景概述 在OpenGL绘制图形时,可能需要绘制多个并不相连的图形.这样的情况下这几个图形没法被当做一个图形来处理.也就需要多次调用 DrawArrays 或 DrawElements. ...

  7. 我写的一些前端开源项目(均托管到github)

    大部分项目都是平时项目用到的某些功能,觉得有趣或者复用性有点高就提取成一个单独项目来做维护 coffee-tmpl : 一个极简的模板引擎和ejs及underscore的template类似 turn ...

  8. 吐血大奉献,打造cnblogs最新最火辣的css3模板(IE9以下请勿入内) -- 第一版

    一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板 ...

  9. Entity Framework 6 Recipes 2nd Edition(11-5)译 -> 从”模型定义”函数返回一个匿名类型

    11-5. 从”模型定义”函数返回一个匿名类型 问题 想创建一个返回一个匿名类型的”模型定义”函数 解决方案 假设已有游客(Visitor) 预订(reservation)房间(hotel ) 的模型 ...

  10. C++ std::array

    std::array template < class T, size_t N > class array; Code Example #include <iostream> ...