配置ionic（低版本）

淘寶鏡像npm install -g cnpm --registry=https://registry.npm.taobao.org，安裝完成後，之後全部的插件都使用cnpm這個命令來進行安裝。

 

低版本

 

 

一、安裝node

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

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

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

二、安裝Ionic Framework

npm install -g ionic

安裝成功則輸入命令行ionic -v可看到版本號（失敗緣由可能和node版本有關）

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

三、建立項目工程

全部ionic命令都在工程目錄下執行

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

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

 

默認：

工程文件夾名稱：client.demo

工程名稱：JXBankDemo

工程包名：com.jxbank.client

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

四、添加平臺支持

ionic platform android ios

命令執行後，會添加Android和iOS平臺的支持，在工程platforms文件夾下，會生成android和ios文件夾，分別爲兩個平臺的客戶端工程代碼，可使用Android Studio和Xcode打開導入工程。

（windows操做系統不支持添加ios，只能生成android文件夾）

五、安裝ruby

由於sass依賴於ruby環境，因此裝sass以前先確認裝了ruby。

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

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

 

 

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

六、安裝sass

安裝完ruby以後，在開始菜單中，找到剛纔咱們安裝的ruby，打開Start Command Prompt with Ruby

 

 

而後直接在命令行中輸入

gem install sass

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

七、設置sass

ionic setup sass   

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

若是安裝失敗使用鏡像安裝（或暫時略過）

八、調試工程

ionic serve

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

九、（沒有執行）

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

 

ionic emulate ios[android]

在Android或iOS模擬器運行工程

ionic run ios[android]

在Android或iOS真機運行工程

十、安裝cordova

npm install -g cordova

若是安裝失敗使用淘寶鏡像安裝

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

十一、安裝webstorm

下載安裝，最後一步能夠選擇直接導入dbank-app項目

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

 

 

十二、（沒有執行）

建立並運行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

1三、（沒有執行）

到svn上下載代碼

路徑是  E:\directbank\trunk\BankPartnerWeb

14、安裝cnpm包管理工具

npm install -g cnpm

1五、安裝node_modules模塊

到下載的工程目錄下執行cnpm install命令，而且在webstorm設置其不更新（沒有成功）

 

 

1六、安裝完成後，找到目錄中的gulpfile.js文件，右鍵

 

 

成功則會出現如下界面

 

 

 

1七、設置ionic快捷啓動項