ionic 入門創建第一個應用demo


一、ionic卸載

1.清除舊版本的ionic框架

npm uninstall -g ionic 

npm uninstall -g cordova 

npm cache clear 

npm cache clean

 

2.確定ionic具有哪些可以創建的模板

ionic start --list

 

二、ionic安裝

1.npm安裝

sudo apt-get install  npm

由於牆的問題,可能會出現問題

 

2.nodejs安裝

sudo apt-get install  nodejs

 

3.cordova和ionic安裝  

sudo npm install -g cordova ionic 

 

4.測試cordova和ionic是否安裝成功

//測試cordova, 直接輸入
$ cordova

//測試ionic,直接輸入
$ ionic

分別出現: 

 

 

說明安裝成功

 

查看相應版本:

cordova -v

ionic -v

 

 

5.創建ionic應用

(1)查看當前版本ionic可以創建的模板

ionic start --list

 

(2)創建應用

ionic start demo [templateName]  

 不加templateName時,默認安裝的是tabs模板的

 

(3)應用創建成功,當前目錄會創建一個以你命名的文件夾

 

(4)進入到該應用目錄下: cd demo

 (5)此時可以看到該目錄下已經有一些文件,並且包含一個package.json的文件,了解一點前端nodejs技術的人都知道,這是該應用需要安裝的模塊的列表,此時運行

npm install

即按照該文件進行安裝相應的文件,運行結束后,會出現一個 node_modules的文件目錄,該目錄下的文件就是應用需要的模塊,不需要我們進行任何操作

注意:直接運行npm install 僅適用於本地,並且未配置虛擬域名,如果需要通過域名訪問,則需要修改package.json文件

具體修改操作:

      

加入一條url的配置,配置的值為你自己的域名

 

 (6) 運行應用:

ionic serve

如果是在本地的話,此時瀏覽器會自動打開,訪問地址為:http://localhost:8100 的頁面,並出現tabs模板的樣式

 

域名訪問的情況的話,需要手動輸入你配置的域名,我的是:

http://www.zqblogs.cn:8100   頁面效果為:

在審查元素下選擇移動設備效果,

便可預覽app效果,可自主選擇設備

 

ionic入門搭建應用模板完成

 

操作中可能最大的問題就是npm的安裝和ionic創建應用時可能會失敗

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM