建置Ionic框架開發環境

By | 2018-12-20

一、前言

Ionic是一個用來開發混合式APP(Hybrid APP)的一個框架,這一個框架提供了許多內建的元件,而且每個元件看起來都滿美觀的,這對於美工不好的程式設計師來說是一個不錯的開發工具。

二、開發環境

開發軟體:Ionic 4 (Ionic 官方文件)

開發環境:Windows 10 64 bit

套件版本:Node.js 10.14.2 TLS

三、安裝步驟

安裝NPM

Ionic目前是透過NPM來安裝的,所以要安裝Ionic前,你的電腦中必須要先安裝NPM。首先,先上Node.js官網下載Node.js,如下圖所示:

下載Node.js

接著,安裝Node.js,基本上一直按Next即可。安裝Node.js

接著打開命令提示字元,並輸入

測試是否安裝完成了,若安裝成功,應該會出現以下的訊息。

Testing_nodejs

­

安裝Ionic框架­

在命令提示字元中,輸入

安裝完成後,應該會看到以下的訊息。

install_ionic

創建一個新的APP專案

首先,先在命令提示字元中,使用cd指令,切換到你要創建APP的資料夾中,接著輸入以下指令來創建一個新的APP專案。

其中,APP類型有tabs、sidemenu、blank、super及tutorial等類型。

接著,它會問一些關於專案的相關問題,回答如下:

try_ionic_4

是否使用Ionic 4,y是使用Ionic 4,N是使用Ionic 3,這裡我選y。

appflow_ionic

接著會問你是否要使用Ionic Appflow開發包,這裡請輸入n(若你有Ionic Appflow的帳號,可輸入Y)。

create_app_success

最後,請使用cd指令,切換到你的APP專案內,並輸入

啟動你新建的APP,輸入指令如下:

cd_serve

啟動畫面如下:

ionic_blank_app

One thought on “建置Ionic框架開發環境

  1. Pingback: 標籤(Badge) - Ionic教學 - 爆肝工程師的備忘錄

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *