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等。

你可以看到运行效果:

Ionic 2安装与使用_第1张图片

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

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

你可能感兴趣的:(Ionic 2安装与使用)