前端移动App开发环境搭建
移动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
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开发环境搭建的更多相关文章
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
- phoneGap+cordova+ionic混合app开发环境搭建
参考链接:http://www.w2 bc.com/article/177257 待补充
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发
vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- 使用gulp搭建一个传统的多页面前端项目的开发环境
1.简介 使用gulp搭建一个传统的多页面前端项目的开发环境 支持pug scss es6编译支持 支持开发环境和打包生成sourceMap 支持文件变动自动刷新浏览器,css是热更新(css改动无需 ...
- HTML5 移动应用开发环境搭建及原理分析
开发环境搭建: 一.Android 开发平台搭建 安装java jdk:\\10.194.151.132\Mewfile\tmp\ADT 配置java jdk 1) 新建系统变量,JAVA_HOME ...
- Weex开发之路(1):开发环境搭建
一.Weex介绍 Weex是阿里巴巴在2016年6月份对外开源的一款移动端跨平台的移动开发工具,Weex的出现让我们的应用既有了Native的性能和H5的动态性,只要通过前端JS语法就能写出同时兼容i ...
- 如何学习web开发环境搭建和脚手架
Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...
随机推荐
- 几个有趣的WEB设备API(二)
浏览器和设备之间还有很多有趣的接口, 1.屏幕朝向接口 浏览器有两种方法来监听屏幕朝向,看是横屏还是竖屏. (1)使用css媒体查询的方法 /* 竖屏 */ @media screen and (or ...
- 从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点)
从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
- 使用 Nodejs 搭建简单的Web服务器
使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...
- eclipse 快捷键大全
注:因eclipse版本.电脑配置等原因 有些快捷键可能导致不可用(遇到些许问题可在下方评论) [Ct rl+T] 搜索当前接口的实现类 1. [ALT +/] 此快捷键为用户编辑的好帮手,能为 ...
- Hawk 4.4 执行器
执行器是负责将Hawk的结果传送到外部环境的工具.你可以写入数据表,数据库,甚至执行某个特定的动作,或是生成文件等等. 在调试模式下,执行器都是不工作的.这是为了避免产生副作用.否则,每刷新一遍数据, ...
- [C#] C# 知识回顾 - 异常介绍
异常介绍 我们平时在写程序时,无意中(或技术不够),而导致程序运行时出现意外(或异常),对于这个问题, C# 有专门的异常处理程序. 异常处理所涉及到的关键字有 try.catch 和 finally ...
- 如何利用pt-online-schema-change进行MySQL表的主键变更
业务运行一段时间,发现原来的主键设置并不合理,这个时候,想变更主键.这种需求在实际生产中还是蛮多的. 下面,看看pt-online-schema-change解决这类问题的处理方式. 首先,创建一张测 ...
- 深入浅出JavaScript之闭包(Closure)
闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面写下我的学习笔记~ 闭包-无处不 ...
- HP服务器 hp 360g5 centos7安装问题
HP服务器 hp 360g5 centos7安装问题 一 :启动盘无法识别硬盘 1.进入安装光盘,用上下键选择安装centos--Install Centos7(注意不可按Enter键),如图: 2 ...
- 项目自动化建构工具gradle 入门1——输出helloWorld
先来一个简单的例子,4个步骤: 1.进入D:\work\gradle\java 目录 ,您电脑没这目录? 那辛苦自己一级一级建立起来吧 新建文件build.gradle,文件内容是: apply p ...