开发环境搭建

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

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

  1. E:\zhaikun\IonicProjects>ionic -v
  2. 3.9.2

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

创建项目

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

  1. E:\zhaikun\IonicProjects>ionic --help
  2.    _             _
  3.   (_)           (_)
  4.    _  ___  _ __  _  ___
  5.   | |/ _ \| '_ \| |/ __|
  6.   | | (_) | | | | | (__
  7.   |_|\___/|_| |_|_|\___|  CLI 3.9.2
  10.   Usage:
  12.     $ ionic <command> [<args>] [--help] [--verbose] [--quiet] [--no-interactive] [--confirm] [options]
  14.   Global Commands:
  16.     config <subcommand> ...... Manage CLI and project config values (subcommands: get, set)
  17.     docs ..................... Open the Ionic documentation website
  18.     info ..................... Print system/environment info
  19.     login .................... Login with your Ionic ID
  20.     signup ................... Create an Ionic account
  21.     start .................... Create a new project
  22.     telemetry ................ Opt in and out of telemetry

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

  1. E:\zhaikun\IonicProjects>ionic start

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

  1. ? What would you like to name your project:

此处小编的项目名称为MyIonicDemo

  1. ? What would you like to name your project: MyIonicDemo

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

  1. ? What starter would you like to use: tabs

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

  1. √ Creating directory .\MyIonicDemo - done!
  2. [INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
  3. √ Downloading - done!
  4. [INFO] Fetching starter template tabs (https://github.com/ionic-team/ionic2-starter-tabs/archive/master.tar.gz)
  5. √ Downloading - done!
  6. √ Updating package.json with app details - done!
  7. √ Creating configuration file ionic.config.json - done!
  8. [INFO] Installing dependencies may take several minutes!
  9. > npm install
  10. √ Running command - done!
  11. > git init
  12. > git add -A
  13. > git commit -m "Initial commit" --no-gpg-sign
  15. ♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫
  17. Run your app in the browser (great for initial development):
  18.   ionic serve
  20. Run on a device or simulator:
  21.   ionic cordova run ios
  23. Test and share your app on a device with the Ionic View app:
  24.   http://view.ionic.io
  27. Next Steps:
  28. Go to your newly created project: cd .\MyIonicDemo

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

跨平台编译

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

  1. $ cd MyIonicDemo

为项目添加Android平台

  1. $ ionic cordova platform add android

添加iOS平台

  1. $ ionic cordova platform add ios

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

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

运行项目

  1. $ ionic serve

使用上面的命令会使项目运行在浏览器中
image.png
作为一个APP开发人员，让我看到如此的界面是无发忍受的，我们需要看到的是在手机上的显示效果，在浏览器地址后面加上 ionic-lab
image.png
图片太小看不清楚，怎么办？鼠标指针悬停在图片上，右键点击，选择在新浏览器中打开，come on

在模拟器中查看运行效果（以Android为例，需要配置好JDK、Android SDK）

  1. $ ionic cordova emulate android

项目编译（以Android为例）

  1. $ ionic cordova build android

编译成功后，会在对应目录下生成相应的apk文件
image.png

项目调试

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

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