場景

Ionic介紹

Ionic 是一個開源的移動應用程序開發框架，它可以輕松地使用web 技術構建高質量的跨平
臺的移動應用?？梢宰屛覀兛焖匍_發移動App、移動端WEB 頁面、微信公眾平臺應用，混
合app web 頁面等。
Ionic 基于Web Components，具有更好的運行速度，相比以前版本的Ionic 框架性能提升很
多。
Web Components 是一套不同的技術，允許您創建可重用的定制元素（它們的功能封裝在您
的代碼之外）并且在您的web 應用中使用它們。目前WEB 組件目前仍然依靠各種類似”
Hack”的方式來模擬，模擬方式也各有不同，很難統一和標準化，而Web Components 則
直接提供了標準化的組件定義方式，這是組件標準化的基石，使得未來的組件能夠統一創建、
方法調用、事件監聽、屬性訪問等。基于標準化的組件定義方式，我們便可以像W3C 等標
準組織一樣來定義組件標準，無需再依賴、等待“內置”組件，這也使得我們獲得了“漁”
的能力。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

Ionic安裝

必須安裝node.js，建議安裝最新的穩定版本。

然后管理員打開cmd,全局安裝cordova 和 ionic

全局安裝cordova

npm install -g cordova

或者

cnpm install -g cordova

?

全局安裝ionic

npm install -g? ionic

或者

cnpm install -g ionic

?

新建ionic項目

新建一個文件夾，然后在此處打開命令行，輸入

ionic start myApp tabs

其中myApp是項目名，后面tabs是項目配置項，tabs代表底部帶tab頁的項目結構，其他選項還有

blank 空項目和 sidemenu 側邊欄菜單結構

?

回車后會讓你選擇實現的語言這里選擇的是Angular，然后回車

?

如果在新建項目過程中出現卡頓，一直卡在npm i這個環節并且目錄下myApp下已經有相應的目錄結構

?

此時可以繼續等待(很長時間)或者Ctrl + C,結束掉然后進入到項目目錄

cd myApp

使用

cnpm install

安裝項目依賴

?

然后啟動項目

ionic serve

?

如果在啟動過程中遇到

Ionic啟動時提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0：

https://mp.csdn.net/console/editor/html/106308008

打開瀏覽器輸入：

localhost:8100

?

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Ionic介绍以及搭建环境、新建和运行项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。