配置ionic(低版本)


淘寶鏡像npm install -g cnpm --registry=https://registry.npm.taobao.org,安裝完成后,以后所有的插件都使用cnpm這個命令來進行安裝。

 

低版本

 

 

1、安裝node

下載地址:https://nodejs.org/en/blog/release/v4.4.2/

安裝成功則輸入命令行node -v可看到版本號

(卸載之前版本強烈推薦系統自帶設置-系統-應用和功能-nodejs右鍵卸載)

2、安裝Ionic Framework

npm install -g ionic

安裝成功則輸入命令行ionic -v可看到版本號(失敗原因可能和node版本有關)

安裝低版本需要強制版本號npm install ionic@1.2.4安裝,且低版本需要低版本的node和npm

3、創建項目工程

所有ionic命令都在工程目錄下執行

ionic start dbank-app tabs -a "dbank-app" -i com.dbank-app

會在該路徑下創建dbank-app工程,成功可看到該文件

 

默認:

工程文件夾名稱:client.demo

工程名稱:JXBankDemo

工程包名:com.jxbank.client

工程種子模板類型:帶有底部tabbar的默認工程

4、添加平台支持

ionic platform android ios

命令執行后,會添加AndroidiOS平台的支持,在工程platforms文件夾下,會生成androidios文件夾,分別為兩個平台的客戶端工程代碼,可以使用Android StudioXcode打開導入工程。

windows操作系統不支持添加ios,只能生成android文件夾)

5、安裝ruby

因為sass依賴於ruby環境,所以裝sass之前先確認裝了ruby。

下載地址:https://rubyinstaller.org/downloads/

安裝時務必勾選Add Ruby executables to your PATH這個選項,添加環境變量,不然以后使用編譯軟件的時候會提示找不到ruby環境

 

 

安裝成功則輸入命令行ruby -v可看到版本號

6、安裝sass

安裝完ruby之后,在開始菜單中,找到剛才我們安裝的ruby,打開Start Command Prompt with Ruby

 

 

然后直接在命令行中輸入

gem install sass

安裝成功打開cmd輸入命令行sass -v可看到版本號

7、設置sass

ionic setup sass   

安裝過程中會提示安裝gulp,直接使用npm install -g gulp安裝

如果安裝失敗使用鏡像安裝(或暫時略過)

8、調試工程

ionic serve

命令執行后,會自動打開瀏覽器,並加載工程首頁,進行開發調試,默認運行在LiveReload模式下,修改任何源碼都會在瀏覽器實時生效,看到修改效果。

9、(沒有執行)

真機運行工程,會編譯打包對應平台的程序,生成應用的安裝程序並安裝運行

 

ionic emulate ios[android]

AndroidiOS模擬器運行工程

ionic run ios[android]

AndroidiOS真機運行工程

10、安裝cordova

npm install -g cordova

如果安裝失敗使用淘寶鏡像安裝

安裝成功可在命令行看到版本號

11、安裝webstorm

下載安裝,最后一步可以選擇直接導入dbank-app項目

webstorm中設置SCSS Watcher(自定義路徑是--no-cache --update $FileName$:$ProjectFileDir$/www/css/$FileNameWithoutExtension$.css)

 

 

12、(沒有執行)

創建並運行project (如果需要在Android或ios環境調試還需要安裝對應的sdk)

a.新建一個目錄pro,並進入 

引用

> cd C:\pro



b.創建一個“myapp”工程 

引用

> cordova create myapp com.yourname.myapp MyApp



c.進入工程目錄 

引用

> cd myapp



d.添加平台支持 

引用

> cordova platforms add ios 
> cordova platforms add android 

> cordova platforms ls

13、(沒有執行)

svn上下載代碼

路徑是  E:\directbank\trunk\BankPartnerWeb

14安裝cnpm包管理工具

npm install -g cnpm

15、安裝node_modules模塊

到下載的工程目錄下執行cnpm install命令,並且在webstorm設置其不更新(沒有成功)

 

 

16、安裝完成后,找到目錄中的gulpfile.js文件,右鍵

 

 

成功則會出現以下界面

 

 

 

17、設置ionic快捷啟動項

 

 


免責聲明!

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



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