嘿 好久不見悟衩！IONIC3終于趨于穩(wěn)定，這次的教程選的是一個(gè)簡單商城案例栓拜，主要包含商品分類座泳，和商品列表，商品詳情幕与、個(gè)人中心挑势。同樣，功能很簡單啦鸣，但基本涵蓋了實(shí)戰(zhàn)開發(fā)中所用到的內(nèi)容薛耻，包括一些封裝思想、網(wǎng)絡(luò)請(qǐng)求赏陵、數(shù)據(jù)綁定饼齿、組建通信饲漾、模塊懶加載、自定義組件等等缕溉。
另外考传，在這個(gè)項(xiàng)目實(shí)戰(zhàn)系列教程中，你可以了解到一個(gè)完整項(xiàng)目的開發(fā)流程和思路是怎樣的证鸥，包括一些封裝思想僚楞，為什么要這樣封裝，怎樣去減少耦合枉层，怎樣減少項(xiàng)目后期維護(hù)的工作量泉褐。
很抱歉，讓大家久等了鸟蜡，廢話不多說膜赃，直接開始。
關(guān)于ionic3項(xiàng)目實(shí)戰(zhàn)教程
1-1.png
這一講主要包含以下幾個(gè)部分：
- 1.技術(shù)儲(chǔ)備揉忘；
- 2.安裝環(huán)境跳座；
- 3.新建項(xiàng)目；
- 4.搭建基礎(chǔ)框架泣矛；
- 5.運(yùn)行效果圖疲眷；
1.技術(shù)儲(chǔ)備
在項(xiàng)目開始前，請(qǐng)確保你對(duì)以下知識(shí)有所了解：
- 會(huì)使用npm基礎(chǔ)命令您朽；
- 熟悉HTML+CSS狂丝；
- 熟悉TypeScript2+；
- 了解Angular2/4框架哗总；
- 了解corodva插件的使用美侦；
- 了解MVC或者M(jìn)VVM設(shè)計(jì)模式；
- 會(huì)使用一款I(lǐng)DE,本教程使用的是visual studio code;
2.安裝環(huán)境
npm install -g ionic@latest
3.新建項(xiàng)目
ionic start ionic3-dress tabs
如果在npm install需要等待?很久魂奥，可以直接結(jié)束使用cnpm install來安裝依賴包菠剩。
我的環(huán)境如下：
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.搭建基礎(chǔ)框架
此項(xiàng)目主要用到三個(gè)tab：首頁推薦、優(yōu)惠精選耻煤、個(gè)人中心具壮；對(duì)應(yīng)的更改tabs.html代碼：
<ion-tabs>
<ion-tab [root]="tab1Root" tabsHideOnSubPages="true" tabTitle="首頁推薦" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabsHideOnSubPages="true" tabTitle="優(yōu)惠精選" tabIcon="megaphone"></ion-tab>
<ion-tab [root]="tab3Root" tabsHideOnSubPages="true" tabTitle="個(gè)人中心" tabIcon="person"></ion-tab>
</ion-tabs>
5.運(yùn)行效果圖
ionic serve
1.png
下一講將講解如何在ionic3中配置懶加載。
完哈蝇！
