淘寶鏡像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
命令執行后,會添加Android和iOS平台的支持,在工程platforms文件夾下,會生成android和ios文件夾,分別為兩個平台的客戶端工程代碼,可以使用Android Studio和Xcode打開導入工程。
(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]
在Android或iOS模擬器運行工程
ionic run ios[android]
在Android或iOS真機運行工程
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快捷啟動項