1. 介紹
ionic 是一個開源的移動應用程序開發框架，它可以讓我們快速的使用web技術構建高質量的移動應用。它不僅可以開發跨平台移動app還可以開發移動端web頁面，桌面應用程序(結合electron)、混合appweb頁面等。
ionic 經過很多年的發展已經非常成熟了。最新的ionic4.x、ionic5.x基于web componets，具有更好的運行速度，相比以前版本的ionic框架性能提升很多。
ionic4.x 和ionic5.x用法是一樣的
ionic 4.x 以後在angular、vue、react基礎上面做了一些封裝，讓我們可以更快速和容易的開發跨平台的移動應用。ionic調用原生的功能是基于cordova，cordova提供了使用javascript調用native功能，ionic自己也封裝了一套漂亮的CSS UI庫。
2. ionic的安裝運行
2.1. 學習前準備工作
必須得安裝nodejs
必須有angular基礎
2.2. 安裝cordova ionic
這樣的指令是代表cordova與ionic一起安裝
1 | npm install -g cordova ionic |
2.3. 檢查安裝
1 | ionic -v |
2.4. 創建項目
2.5. ionic start [<name>] [<template>]
<name> 專案名稱
<template>版型名稱，Ionic 目前提供的版型有：blank、sidemenu、tutorial、tabs、super
輸入以下指令
1 | ionic start crm sidemenu |
輸入指令後會問要用哪個框架開發，選用angular
創建完之後結構如圖
3. 使用vscode開發
打開剛剛的路徑
比方說在d槽的ionic_app資料夾底下
接著再輸入指令
1 | ionic serve |
以瀏覽器打開，用手機模擬模式看到的畫面如下，這樣就簡單的創建了一個有sidebar的template囉
3.1. 安裝extension
3.1.1. angluar
3.1.2. ionic
自動產生程式碼片段
1 | <<ion-button (click)="onClick()" expand="block" fill="clear" shape="round"> |