关于开发环境的搭建,请参考小编的另一篇文章Ionic 介绍、安装、配置、项目不同平台编译、DeBug调试经验总结

此处,小编的开发环境已搭建完成,使用的Ionic版本为

E:\zhaikun\IonicProjects>ionic -v
3.9.2

这是在任意目录下,输入命令查看的结果V3.9.2

创建项目

当然了,相信牛X的你每天都有堆积如山的工作,那么多的命令记不住也是常有的事。小编常用的解决方案就是help、help、help

E:\zhaikun\IonicProjects>ionic --help
_ _
(_) (_)
_ ___ _ __ _ ___
| |/ _ \| '_ \| |/ __|
| | (_) | | | | | (__
|_|\___/|_| |_|_|\___| CLI 3.9.2


Usage:

$ ionic <command> [<args>] [--help] [--verbose] [--quiet] [--no-interactive] [--confirm] [options]

Global Commands:

config <subcommand> ...... Manage CLI and project config values (subcommands: get, set)
docs ..................... Open the Ionic documentation website
info ..................... Print system/environment info
login .................... Login with your Ionic ID
signup ................... Create an Ionic account
start .................... Create a new project
telemetry ................ Opt in and out of telemetry

看一下给出的命令及对应的解释,就可以很清楚的知道,我们创建一个项目需要使用start命令

E:\zhaikun\IonicProjects>ionic start

然后系统会提示我们,给我们创建的项目取一个响亮的名字

? What would you like to name your project:

此处小编的项目名称为MyIonicDemo

? What would you like to name your project: MyIonicDemo

回车,提示让我们选择一个创建模板,此处小编选择的是tabs模板

? What starter would you like to use: tabs

回车,等待项目创建完毕即可,这里查看下项目创建过程和成功后的信息

√ Creating directory .\MyIonicDemo - done!
[INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
√ Downloading - done!
[INFO] Fetching starter template tabs (https://github.com/ionic-team/ionic2-starter-tabs/archive/master.tar.gz)
√ Downloading - done!
√ Updating package.json with app details - done!
√ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
√ Running command - done!
> git init
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Run your app in the browser (great for initial development):
ionic serve

Run on a device or simulator:
ionic cordova run ios

Test and share your app on a device with the Ionic View app:
http://view.ionic.io


Next Steps:
Go to your newly created project: cd .\MyIonicDemo

此处项目的创建过程说的比较繁琐,目的是为了强调,如果命令行记不住咱们应该如何应对,下文中将使用相关命令直接进行,创建项目的完整命令为 $ ionic start MyIonicDemo tabs

跨平台编译

进入我们创建的项目的根目录

$ cd MyIonicDemo

为项目添加Android平台

$ ionic cordova platform add android

添加iOS平台

$ ionic cordova platform add ios

在添加平台支持时,会下载一些所必须的插件,建议全称翻墙

添加成功后会在项目的platforms文件夹中显示添加的平台支持

运行项目

$ ionic serve

使用上面的命令会使项目运行在浏览器中

作为一个APP开发人员,让我看到如此的界面是无发忍受的,我们需要看到的是在手机上的显示效果,在浏览器地址后面加上 ionic-lab

图片太小看不清楚,怎么办?鼠标指针悬停在图片上,右键点击,选择在新浏览器中打开,come on

在模拟器中查看运行效果(以Android为例,需要配置好JDK、Android SDK)

$ ionic cordova emulate android

项目编译(以Android为例)

$ ionic cordova build android

编译成功后,会在对应目录下生成相应的apk文件

项目调试

不管是Android平台,还是iOS平台,都可以将platforms文件夹下的android文件夹或iOS文件夹直接在IDE中打开即可

打开的项目是可以直接在IDE中运行调试的,但是切记,不要再IDE中修改android或iOS文件夹下的任何文件,因为改动是无效的,对于Ionic模式下建立的项目,其源码都是存放于项目根目录下的src文件夹中的。

关于Ionic项目的工程目录结构,请查看Ionic 3 项目的工程目录结构