Ionic 2 应用使用 Ionic CLI (Ionic command line) 创建,使用 Cordova 打包成本地应用。在安装 Ionic CLI 之前,需要先安装 Node.js。
1.1.安装Node.js
Node.js建议安装最新版本,下载地址:
经测试,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 镜像的其他使用问题,请参考:
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的集成