ionic小試

1.npm安裝
1 sudo apt-get install  npm
由於牆的問題,可能會出現問題
 
2.nodejs安裝
1 sudo apt-get install  nodejs
 
3.cordova和ionic安裝  
1 sudo npm install -g cordova ionic
 
4.測試cordova和ionic是否安裝成功
1
2
3
4
5 //測試cordova, 直接輸入
$ cordova
 
//測試ionic,直接輸入
$ ionic
分別出現: 
 
 
說明安裝成功
 
查看相應版本:
1
2
3 cordova -v
 
ionic -v

5.創建ionic應用
(1)查看當前版本ionic可以創建的模板
1 ionic start --list
 
(2)創建應用
1 ionic start demo [templateName]  
 不加templateName時,默認安裝的是tabs模板的
 
(3)應用創建成功,當前目錄會創建一個以你命名的文件夾
 
(4)進入到該應用目錄下: cd demo
 (5)此時可以看到該目錄下已經有一些文件,並且包含一個package.json的文件,瞭解一點前端nodejs技術的人都知道,這是該應用需要安裝的模塊的列表,此時運行
1 npm install
即按照該文件進行安裝相應的文件,運行結束後,會出現一個 node_modules的文件目錄,該目錄下的文件就是應用需要的模塊,不需要我們進行任何操作
注意:直接運行npm install 僅適用於本地,並且未配置虛擬域名,如果需要通過域名訪問,則需要修改package.json文件
具體修改操作:
      
加入一條url的配置,配置的值爲你自己的域名
 
 (6) 運行應用:
1 ionic serve

如果是在本地的話,此時瀏覽器會自動打開,訪問地址爲:http://localhost:8100 的頁面,並出現tabs模板的樣式
 
域名訪問的情況的話,需要手動輸入你配置的域名,我的是:
http://www.zqblogs.cn:8100   頁面效果爲:

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

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

ionic入門搭建應用模板完成
 
操作中可能最大的問題就是npm的安裝和ionic創建應用時可能會失敗

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章