學(xué)習(xí)本教程前你需要了解以下內(nèi)容：

基礎(chǔ)知識儲備

前端基本知識（HTML5、JavaScript比較少、CSS、SASS）
TypeScript
Angular4.0

• 學(xué)習(xí)之路之TypeScript：
  w3c
  慕課網(wǎng)
  TS 中文官方文檔
  還有阮一峰老師的網(wǎng)絡(luò)日志
• 學(xué)習(xí)之路之Angular
  官方文檔我覺得是最好的文檔了，但是目前更新過。很多東西隱藏的比較深。

1. 什么是 ionic？
   答：Ionic框架是一個開放源碼SDK，使開發(fā)人員能夠使用熟悉的網(wǎng)絡(luò)技術(shù)（HTML，CSS和JavaScript）來構(gòu)建高性能，高質(zhì)量的移動應(yīng)用程序。ionic通俗點說就是一款移動端框架。利用前端知識對移動端進行開發(fā)。
   官方解釋ionic

2.ionic3、Angular、TypeScript簡單介紹？
答：在ionic1.0本的時候，那個時候angular也是1.0,并且是支持javascript的編寫的。但是當(dāng)angular升級為2.0之后，angular開發(fā)語言編程TypeScript微軟的面向?qū)ο蟮恼Z言，所以ionic也進行相應(yīng)的升級。就到了目前的ionic3.當(dāng)然升級的原因的話就是因為性能的提升，開發(fā)的難易程度，前端思想等等。目前Angular到了4.0以上版本，在我寫這些文字的時候，看到說在十月份將會升級到5.0，但是這些都不是重要的事情，因為Angular是沒有3.0版本的，2.0直接到了4.0，然后即將5.0都將會是對2.0的性能升級和bug修復(fù)等等，不會有重大的變化。所以不會angular的童鞋們，直接上手干4.0起步ok?我覺得只需要知道：ionic是編寫移動端框架,使用了Augular作為腳手架，Angular又已TypeScript作為編寫語言。

3. Cordova簡單介紹哈？
   答：Cordova構(gòu)建和部署為本機應(yīng)用程序。說白了就是將ionic打包成可以在手機上使用的工具而已。

Ionic部分

第一部分：環(huán)境準備

1. 安裝Nodejs6.0以上版本，安裝到本地電腦，配置完成。安裝完成之后在window的dos命令行中就有npm命令,該命令式和Nodejs一同安裝的。

 查看版本
    - node -v            
    - npm -version  

image.png

2.Ionic應(yīng)用程序主要通過Ionic命令行實用程序（“CLI”）創(chuàng)建和開發(fā)，并使用Cordova構(gòu)建和部署為本機應(yīng)用程序。安裝ionic/cordova,使用 npm install -g ionic cordova 全局安裝（-g參數(shù)）ionic cordova，值得注意的是mac上可能需要獲取管理員的資格才行。

查看版本：
  ionic -v
  cordova -v

image.png

以上都能正確的顯示版本信息，那么基本上就說明環(huán)境沒有問題了，但是在window中有時候會出現(xiàn)一些莫名的問題，不要著急，翻墻之后重新安裝即可。大家都是明白的，需要翻墻，翻墻技術(shù)自行百度。
最后：可以使用ionic info查看所有的關(guān)于ionic的信息。相當(dāng)于上面的查看版本的集合咯。

image.png

接下來就是感受ionic的時候了

  圖片在下方：
  1. 創(chuàng)建ionic項目
  ionic start projiectName --v2 
  創(chuàng)建了名字叫做：projiectName 的ionic2以上的項目，默認使用的是簡單的3選項卡模板。
   
2.進入到projiectName項目中，cd projectName或者直接在該文件夾中ctrl+鼠標右鍵->在此處打開命令行窗口

3.ionic serve啟動項目，默認端口為8100

創(chuàng)建項目之后的項目結(jié)構(gòu)：

image.png

運行項目：

image.png

最終結(jié)果：

image.png

到此：
從搭建ionic環(huán)境-創(chuàng)建第一個ionic項目-運行第一個ionic項目就此結(jié)束。下一節(jié)使用ionic新特性懶加載。