一、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創建應用時可能會失敗