安裝 Ionic2 運(yùn)行環(huán)境

  1. 安裝Node.js npm

下載 node 最新版,安裝好后切換到淘寶鏡像源:

npm install -g cnpm --registry=http://registry.npm.taobao.org

npm install -g cnpm --registry=http://registry.npm.taobao.org

  1. 安裝Ionic2
 cpm install -g ionic

需要注意的是,如果之前安裝過 Ionic 2 的 beta 版本,需要先卸載掉:

npm uninstall -g ionic

安裝完成后輸入以下命令看一下版本號(hào):

ionic -version
2.1.0

目前最新版本是2.1.0。如果是 beta 版本的話,請(qǐng)重新安裝,確保安裝最新版。

3. 創(chuàng)建項(xiàng)目

打開 Node 命令行,首先 cd 到項(xiàng)目目錄,使用 start 命令來創(chuàng)建一個(gè)新App:

cd /d/javascript
ionic start MyIonic2Project tutorial --v2

語(yǔ)法:

ionic start 項(xiàng)目名稱 項(xiàng)目模板 版本

項(xiàng)目名稱:自定義 項(xiàng)目名稱:[ tabs|tutorial|blank],默認(rèn)會(huì)使用 tabs 模板 版本:--v2
參數(shù)必須要加,不然會(huì)建立 v1.x 版本的項(xiàng)目

如果失敗,有可能會(huì)出現(xiàn)以下信息:

Creating Ionic app in folder E:\Workspaces\Ionic2\MyIonic2Project based on tutorial project
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic2-starter-tutorial/archive/master.zip
[=============================] 100% 0.0s
Installing npm packages...
Error with start undefined
Error Initializing app: There was an error with the spawned command: npminstall
There was an error with the spawned command: npminstall
Caught exception:
 undefined
Mind letting us know? https://github.com/driftyco/ionic-cli/issues

這說明 npm 安裝的時(shí)候失敗了,可以 cd 到項(xiàng)目目錄,使用之前設(shè)置過的 cnpm 命令:

cd MyIonic2Project
cnpm install

直到最后輸出類似以下信息:

√ All packages installed (477 packages installed from npm registry, used 2m, speed 77.14kB/s, json 549(3.42MB), tarball 3.38MB)

4. 在瀏覽器中運(yùn)行

ionic serve

輸出類似下面的內(nèi)容:

ionic serve
ionic-app-base@ ionic:serve D:\javascript\ionicFirst
ionic-app-scripts serve

keywords if/then/else require v5 option
[17:06:30]  ionic-app-scripts 0.0.47
[17:06:31]  watch started ...
[17:06:31]  build dev started ...
[17:06:31]  clean started ...
[17:06:31]  clean finished in 1 ms
[17:06:31]  copy started ...
[17:06:31]  transpile started ...
[17:06:35]  transpile finished in 4.49 s
[17:06:35]  webpack started ...
[17:06:36]  copy finished in 4.84 s
[17:06:51]  webpack finished in 15.22 s
[17:06:51]  sass started ...
[17:06:53]  sass finished in 2.01 s
[17:06:53]  build dev finished in 21.92 s
[17:06:53]  watch ready in 22.08 s
[17:06:53]  dev server running: http://localhost:8100/

接著瀏覽器會(huì)打開一個(gè)地址為 http://localhost:8100 的窗口,端口號(hào)根據(jù)當(dāng)前PC的實(shí)際情況可能會(huì)有變化,如果8100被占用了會(huì)使用8101等。

  1. 安裝Cordova

    cnpm install -g cordova

看一下版本號(hào):

$ cordova -version
6.4.0
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容