嘿 好久不见！IONIC3终于趋于稳定，这次的教程选的是一个简单商城案例，主要包含商品分类，和商品列表，商品详情、个人中心。同样，功能很简单，但基本涵盖了实战开发中所用到的内容，包括一些封装思想、网络请求、数据绑定、组建通信、模块懒加载、自定义组件等等。
另外，在这个项目实战系列教程中，你可以了解到一个完整项目的开发流程和思路是怎样的，包括一些封装思想，为什么要这样封装，怎样去减少耦合，怎样减少项目后期维护的工作量。
很抱歉，让大家久等了，废话不多说，直接开始。
关于ionic3项目实战教程
1-1.png
这一讲主要包含以下几个部分：
- 1.技术储备；
- 2.安装环境；
- 3.新建项目；
- 4.搭建基础框架；
- 5.运行效果图；
1.技术储备
在项目开始前，请确保你对以下知识有所了解：
- 会使用npm基础命令；
- 熟悉HTML+CSS；
- 熟悉TypeScript2+；
- 了解Angular2/4框架；
- 了解corodva插件的使用；
- 了解MVC或者MVVM设计模式；
- 会使用一款IDE,本教程使用的是visual studio code;
2.安装环境
npm install -g ionic@latest
3.新建项目
ionic start ionic3-dress tabs
如果在npm install需要等待�很久，可以直接结束使用cnpm install来安装依赖包。
我的环境如下：
cli packages: (/Users/ionic3-dress/node_modules)
@ionic/cli-utils : 1.8.1
ionic (Ionic CLI) : 3.8.1
local packages:
@ionic/app-scripts : 2.1.3
Ionic Framework : ionic-angular 3.6.0
System:
Node : v6.10.3
npm : 3.10.10
OS : macOS Sierra
4.搭建基础框架
此项目主要用到三个tab：首页推荐、优惠精选、个人中心；对应的更改tabs.html代码：
<ion-tabs>
<ion-tab [root]="tab1Root" tabsHideOnSubPages="true" tabTitle="首页推荐" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabsHideOnSubPages="true" tabTitle="优惠精选" tabIcon="megaphone"></ion-tab>
<ion-tab [root]="tab3Root" tabsHideOnSubPages="true" tabTitle="个人中心" tabIcon="person"></ion-tab>
</ion-tabs>
5.运行效果图
ionic serve
1.png
下一讲将讲解如何在ionic3中配置懒加载。
完！
