Ionic 2安装与使用

Ionic 2 应用使用 Ionic CLI (Ionic command line) 创建,使用 Cordova 打包成本地应用。在安装 Ionic CLI 之前,需要先安装 Node.js。

1.1.安装Node.js

Node.js建议安装最新版本,下载地址:

nodejs.org/en/

经测试,5.x版本在编译的时候有可能会报错,请安装最新的6.x版本。

安装完后请打开Node命令行(Node.js command prompt),如果使用 Win 10 系统的话,可以在小娜搜索框里输入一个n,就会显示出来。输入以下命令看一下版本号:

Your environment has been set up for using Node.js 6.8.1 (x64) and npm.

node -v

v7.9.0

npm -v

4.2.0

请保证安装的 Node 和 npm 为较新的版本。根据近期学习 Ionic 的经验,Ionic 2是个非常喜欢追求最新版本的项目组,以前用的好好的代码,说不定某个版本就无法编译通过。

还有一点需要注意的,因为国内的网络环境原因,在下载npm包的时候经常会遇到无法正常下载的情况。国内淘宝推出了 npm 镜像,这是一个完整的 npmjs.org 镜像,同步频率为15分钟一次,保证与官方服务同步。推荐使用该镜像。使用方法如下:

输入以下命令,切换到淘宝镜像源:

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

本文之后所有用到的 npm 命令都可以使用 cnpm 来代替进行 install。但是 cnpm 不支持 publish 命令,需要注意。

关于淘宝 npm 镜像的其他使用问题,请参考:

npm.taobao.org/

1.2.安装Ionic2

输入以下命令安装 Ionic (如果刚才设置了淘宝镜像源,可以使用 cnpm 代替 npm):

npm install -g ionic

需要注意的是,如果之前安装过 Ionic 2 的 beta 版本,需要先卸载掉:

npm uninstall -g ionic

然后重新安装。

安装完成后输入以下命令看一下版本号:

ionic -version

2.2.3

1.3.安装Cordova

输入以下命令安装 Cordova:

npm install -g cordova

看一下版本号:

cordova -version

6.5.0

2.1.创建项目

打开 Node 命令行,首先 cd 到项目目录,使用 start 命令来创建一个新App:

ionic start MyIonic2Project tutorial --v2

这个命令将下载项目模板,安装 npm modules,设置 Cordova 的相关信息。

tutorial 参数的意思是下载 tutorial 模板来初始化项目,如果不指定这个参数的话,比如:

ionic start MyIonic2Project --v2

默认会使用 tabs 模板。

当然你也可以加一个 blank 参数,这样就是一个空项目。

--v2 的参数必须要加,不然会建立 v1.x 版本的项目。

如果失败,有可能会出现以下信息:

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 安装的时候失败了,可以 cd 到项目目录,使用之前设置过的 cnpm 命令:

cd MyIonic2Project

cnpm install

直到最后输出类似以下信息:

All packages installed (319 packages installed from npm registry, use 2m, speed 37.49kB/s, json 659(4MB), tarball 1.07MB)

说明 npm modules 安装成功。

2.2.在浏览器中运行

现在 cd 到项目目录,使用 serve 命令来快速浏览项目:

cd MyIonic2Project

ionic serve

接下来 CLI 会编译项目,输出类似下面的内容:

> ionic-app-base@ watch Workspaces\Ionic2\MyIonic2Project

> ionic-app-scripts watch

[14:38:58] ionic-app-scripts 0.0.36

[14:38:58] watch started ...

[14:38:58] build dev started ...

[14:38:58] clean started ...

[14:38:58] clean finished in 1 ms

[14:38:58] copy started ...

[14:38:58] transpile started ...

[14:38:58] lint started ...

[14:39:17] lint finished in 18.68 s

[14:39:19] transpile finished in 21.32 s

[14:39:19] bundle started ...

[14:39:23] copy finished in 25.39 s

[14:39:49] bundle finished in 29.75 s

[14:39:49] sass started ...

[14:39:53] sass finished in 4.10 s

[14:39:53] build dev finished in 55.20 s

[14:39:54] watch ready in 55.95 s

Running live reload server: http://localhost:35729

Watching: www/**/*, !www/lib/**/*

√ Running dev server: http://localhost:8100

Ionic server commands, enter:

restart or r to restart the client app from the root

goto or g and a url to have the app navigate to the given url

consolelogs or c to enable/disable console log output

serverlogs or s to enable/disable server log output

quit or q to shutdown the server and exit

ionic $

接着浏览器会打开一个地址为 http://localhost:8100 的窗口,端口号根据当前PC的实际情况可能会有变化,如果8100被占用了会使用8101等。

你可以看到运行效果:

进一步学习请移步www.gitbook.com/book/yanxiaodi/ionic2-guide/details

本文是在该作者的分享下对mac的集成

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容

  • ionic 产生的应用,不打包就是跨平台web app, 打包了,就是跨平台mobile app (iOS 和 A...
    Courage_SC阅读 7,165评论 0 9
  • ionic v1 1.7.16 官方文档 获取路径 npm install ionic@1.7.16 -g对应的i...
    ynwshy阅读 3,354评论 0 0
  • Ionic 2应用使用Ionic CLI(Ionic command line) 创建,使用Cordova打包成本...
    全栈弄潮儿阅读 485评论 3 4
  • 今天是我们第二期创客孵化营进行到23天的日子,也是重组的日子。 由于我们23组各位组员的坚持,一个都没落下,还加入...
    舞动幸福888阅读 168评论 0 0
  • 去三鹰逛了一圈,然后没了。导师抽风让我们去开Gaia的workshop,结果讲得巨无聊。后面连在日本怎么获取数据都...
    GSES94阅读 68评论 1 0