Ionic 项目创建
1.安装 nodejs
到官网下载 https://nodejs.org/ ,下载完直接安装就好了。
以下命令查看是否安装成功：
Administrator@YANL / $ node -v v0.12.2 Administrator@YANL / $ npm -v 2.7.4
2. 安装git
到官网下载：http://git-scm.com/download/win
安装完成后，把安装目录\bin添加到Path环境变量：
如：Path = %Path%;C:\Program Files (x86)\Git\bin
3.安装 android sdk tools
baidu 搜索：Android SDK Tools，下载并安装，安装完成后，在程序菜单中找到"SDK Manager" 启动下载 android sdk.
需要下载： Android SDK Platform-tools,Android SDK Build-tools及最新版的Android sdk
下载完成后自动安装。
添加环境变量：ANDROID_HOME :指向Android SDK Tools安装目录
在Path环境变量中添加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
4.安装ANT
到http://ant.apache.org/ 下载ANT后，解压
添加环境变量： ANT_HOME=解压目录
在Path环境变量中添加：%ANT_HOME%\bin
5.安装JAVA
到官网下载Java ,安装完成后，添加环境变量 JAVA_HOME=java安装或解压目录
在Path环境变量中 添加：%JAVA_HOME%\bin
6.安装 ionic 和 cordova
npm install -g cordova ionic
安装完成后，就可以运行npm和cordova命令了：
Administrator@YANL / $ ionic -v 1.3.22 Administrator@YANL / $ cordova -v 5.0.0
6.创建工程
$ ionic start TestApp blank Creating Ionic app in folder e:\cordova_workspace\TestApp based on blank proje Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip [=============================] 100% 0.0s Downloading: https://github.com/driftyco/ionic-starter-blank/archive/master.zi [=============================] 100% 0.0s Update config.xml Initializing cordova project Updated the hooks directory to have execute permissions running cordova plugin add org.apache.cordova.device WARNING: org.apache.cordova.device has been renamed to cordova-plugin-device. u may not be getting the latest version! We suggest you `cordova plugin rm org pache.cordova.device` and `cordova plugin add cordova-plugin-device`. Fetching plugin "org.apache.cordova.device" via cordova plugins registry npm http GET http://registry.cordova.io/org.apache.cordova.device npm http 304 http://registry.cordova.io/org.apache.cordova.device Saving plugin to package.json file Adding since there was no existingPlugin Updated the hooks directory to have execute permissions running cordova plugin add org.apache.cordova.console WARNING: org.apache.cordova.console has been renamed to cordova-plugin-console You may not be getting the latest version! We suggest you `cordova plugin rm o .apache.cordova.console` and `cordova plugin add cordova-plugin-console`. Fetching plugin "org.apache.cordova.console" via cordova plugins registry npm http GET http://registry.cordova.io/org.apache.cordova.console npm http GET http://registry.cordova.io/org.apache.cordova.console npm http GET http://registry.cordova.io/org.apache.cordova.console Saving plugin to package.json file Adding since there was no existingPlugin Updated the hooks directory to have execute permissions running cordova plugin add com.ionic.keyboard Fetching plugin "com.ionic.keyboard" via cordova plugins registry npm http GET http://registry.cordova.io/com.ionic.keyboard npm http GET http://registry.cordova.io/com.ionic.keyboard npm http 304 http://registry.cordova.io/com.ionic.keyboard Saving plugin to package.json file Adding since there was no existingPlugin Your Ionic project is ready to go! Some quick tips: * cd into your project: $ cd TestApp * Setup this project to use Sass: ionic setup sass * Develop in the browser with live reload: ionic serve * Add a platform (ios or Android): ionic platform add ios [android] Note: iOS development requires OS X currently See the Android Platform Guide for full Android installation instructions: https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.ht * Build your app: ionic build <PLATFORM> * Simulate your app: ionic emulate <PLATFORM> * Run your app on a device: ionic run <PLATFORM> * Package an app using Ionic package service: ionic package <MODE> <PLATFORM> For more help use ionic --help or visit the Ionic docs: http://ionicframework. m/docs +---------------------------------------------------------+ + New Ionic Updates for May 2015 + + The View App just landed. Preview your apps on any device + http://view.ionic.io + + Invite anyone to preview and test your app + ionic share EMAIL + + Generate splash screens and icons with ionic resource + http://ionicframework.com/blog/automating-icons-and-splash-screens/ + +---------------------------------------------------------+
为项目添加运行平台：
$ ionic platform add android
Updated the hooks directory to have execute permissions
Downloading Default Ionic Resources
Downloading: https://github.com/driftyco/ionic-default-resources/archive/master.
zip
[=============================] 100% 0.0s
Done adding default Ionic resources
Adding icons for platform: android
running cordova platform add android
npm http GET https://registry.npmjs.org/cordova-android/4.0.0
npm http GET https://registry.npmjs.org/cordova-android/4.0.0
npm http 200 https://registry.npmjs.org/cordova-android/4.0.0
npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.0.
tgz
npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.0.
tgz
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: com.ionicframework.testapp395516
Name: TestApp
Activity: MainActivity
Android target: android-22
Copying template files...
Android project created with [email protected]
Running command: "c:\Program Files\nodejs\node.exe" e:\cordova_workspace\TestApp
\hooks\after_prepare\010_add_platform_class.js e:/cordova_workspace/TestApp
add to body class: platform-android
Installing "com.ionic.keyboard" for android
Installing "org.apache.cordova.console" for android
Installing "org.apache.cordova.device" for android
Saving platform to package.json file7.查看项目目录结构
WWW目录结构：
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>8.安装js模块（可以不安装）
package.json如下：
{
"name": "testapp",
"version": "1.0.0",
"description": "TestApp: An Ionic project",
"dependencies": {
"gulp": "^3.5.6",
"gulp-sass": "^1.3.3",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.0",
"gulp-rename": "^1.2.0"
},
"devDependencies": {
"bower": "^1.3.3",
"gulp-util": "^2.2.14",
"shelljs": "^0.3.0"
},
"cordovaPlugins": [
"org.apache.cordova.device",
"org.apache.cordova.console",
"com.ionic.keyboard"
],
"cordovaPlatforms": [
"android"
]
}在项目目录下运行：
mpm install ，安装package.json中的依赖的js模块
$ npm install npm WARN package.json [email protected] No repository field. npm WARN package.json [email protected] No README data - > [email protected] install e:\cordova_workspace\TestApp\node_modules\gulp-sass\no de_modules\node-sass > node scripts/install.js / > [email protected] postinstall e:\cordova_workspace\TestApp\node_modules\gulp-sas s\node_modules\node-sass > node scripts/build.js `win32-x64-node-0.12` exists; testing Binary is fine; exiting [email protected] node_modules\gulp-rename [email protected] node_modules\shelljs [email protected] node_modules\gulp-minify-css ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) └── [email protected] ([email protected], [email protected], [email protected], a [email protected], [email protected], [email protected], lodash._reint [email protected], [email protected], [email protected], [email protected], chalk@ 1.0.0, [email protected], [email protected], [email protected]) [email protected] node_modules\gulp-concat ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected]) └── [email protected] ([email protected], [email protected], [email protected], a [email protected], [email protected], [email protected], lodash._reint [email protected], [email protected], [email protected], [email protected], chalk@ 1.0.0, [email protected], [email protected], [email protected]) [email protected] node_modules\gulp-util ├── [email protected] ├── [email protected] ├── [email protected] ([email protected], [email protected], supports-colo [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected]) └── [email protected] ([email protected], [email protected] , [email protected], [email protected], [email protected], loda [email protected]) [email protected] node_modules\gulp ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ├── [email protected] ├── [email protected] ([email protected], [email protected], supports-colo [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], end-of-stream @0.1.5) ├── [email protected] ([email protected], [email protected], [email protected], a [email protected], [email protected], [email protected], lodash._reint [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], vinyl@ 0.4.6, [email protected], [email protected], [email protected], [email protected]) └── [email protected] ([email protected], [email protected], [email protected], findup [email protected]) [email protected] node_modules\gulp-sass ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected], a [email protected], [email protected], [email protected], lodash._re [email protected], [email protected], [email protected], [email protected], chalk@ 1.0.0, [email protected], [email protected], [email protected], [email protected]) └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected] .1, [email protected], [email protected], [email protected], [email protected], [email protected], requ [email protected]) [email protected] node_modules\bower ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], supports-colo [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected]. 1, [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], optimist@ 0.6.1) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], readable-s [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], o [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], rim [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected]. 0, [email protected], [email protected], [email protected], [email protected] , [email protected], [email protected], [email protected], [email protected], form-data@0. 2.0, [email protected], [email protected], [email protected], [email protected], haw [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], u [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], throu [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) └── [email protected] ([email protected], [email protected], [email protected] .0, [email protected])
安装browser-sync js模块：(用于与gulp结合使用，开启web服务，供浏览器访问页面)
$ npm install browser-sync --save-dev npm WARN package.json [email protected] No repository field. npm WARN package.json [email protected] No README data npm WARN optional dep failed, continuing [email protected] \ > [email protected] install e:\cordova_workspace\TestApp\node_modules\browser-sync\node_m odules\socket.io\node_modules\engine.io\node_modules\ws > (node-gyp rebuild 2> builderror.log) || (exit 0) | e:\cordova_workspace\TestApp\node_modules\browser-sync\node_modules\socket.io\no de_modules\engine.io\node_modules\ws>if not defined npm_config_node_gyp (node "c :\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\nod e-gyp\bin\node-gyp.js" rebuild ) else (rebuild) / > [email protected] install e:\cordova_workspace\TestApp\node_modules\browser-sync\node_ modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\no de_modules\ws > (node-gyp rebuild 2> builderror.log) || (exit 0) e:\cordova_workspace\TestApp\node_modules\browser-sync\node_modules\socket.io\no de_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws>if not defined npm_config_node_gyp (node "c:\Program Files\nodejs\node_modules\npm\bin \node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (reb uild) [email protected] node_modules\browser-sync ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected], finalhandl [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], debug@ 2.2.0, [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], async-eac [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], in [email protected]) ├── [email protected] ([email protected], angular-saniti [email protected], [email protected], [email protected], [email protected], stream-th [email protected], [email protected]) └── [email protected] ([email protected], [email protected], [email protected] .4, [email protected], [email protected], [email protected])
在项目目录下有gulpfile.js，是gulp运行时的配置文件，打开该文件添加：
var browserSync = require('browser-sync');
// Start the server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./www" //web服务的根
},
port:3000 //web服务的端口
});
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
var files = [
'./www/*.html',
'./www/img/**/*.*',
'./www/views/**/*.html',
'./www/js/**/*.js',
'./www/css/**/*.css'
];
// Watch scss AND html files, doing different things with each.
gulp.task('server', ['browser-sync'], function () {
gulp.watch(files, ['bs-reload']);//检测文件，如有变化自动更新浏览器的显示
});
相关推荐
绿豆饼 2020-07-28
kfq00 2020-04-10
samllcat 2019-07-01
Android进阶 2019-07-01
liujia 2019-07-01
MonkeyKingBi 2019-06-29
wangdazhu0 2019-06-28
liujia 2019-06-28
芯果科技蔡彦 2016-08-25
半纸药笺 2020-07-26
半纸药笺 2020-06-14
芯果科技蔡彦 2020-04-30
芯果科技蔡彦 2020-04-14
samllcat 2020-03-27
ZillahV0 2016-08-27
半纸药笺 2019-11-18
qixiang0 2015-04-24
庆华 2015-12-26