1、安装npm
通过安装Nodejs获得npm包管理工具
2、安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
说明:cnpm是淘宝提供的一套命令,比npm更快速
3、安装cordova
npm install -g cordova@8.0.0
4、安装ionic
npm install -g ionic@4.8.0
说明:
(1)一次性安装
npm install -g cordova ionic
(2)安装指定版本
npm install -g cordova@8.0.0
npm install -g ionic@4.8.0
(2)更新版本
npm update -g cordova ionic
(4)卸载
npm uninstall cordova -g
npm uninstall ionic -g
在安装完成ionic之后,需要对/usr/local/lib/node_modules/目录进行授权设置,避免在OSX、Linux等系统上执行npm命令时出现权限不足的情况:
sudo chmod -R 775 /usr/local/lib/node_modules/
注意:授权命令后面跟着的目录结尾处必须带上 / ,否则将导致授权只到达node_modules层级,它的各个子目录和文件并没有得到对应的权限
5、创建ionic项目
cd ./Workspace/WebstormProjects ionic start myApp tabs // 创建底部菜单项目 ionic start myApp blank // 创建空白项目 ionic start myApp sidemenu // 创建侧滑菜单项目
说明-1:如果创建项目过程很慢,是因为项目正在使用npm命令来加载依赖,请使用 Ctrl+c 快捷键取消这个过程,然后在命令行用 cd myApp 进入项目,通过cnpm来加载依赖 cnpm install
说明-2:这样创建的是ionic 3项目,可以在后面带上参数[--type=angular],带上参数后创建的是ionic 4的项目
ionic start myApp tabs --type=angular
6、运行ionic项目
ionic serve
说明:执行这个命令后,会自动打开浏览器显示项目默认页面
7、添加iOS和Android平台
ionic cordova platform list ionic cordova platform add ios@4.5.4 ionic cordova platform add android@7.0.0
说明:第一行用于查看可用的平台包,后面两行表示添加指定版本号的iOS平台包和Android平台包
8、构建项目
ionic build ios ionic build android
9、运行项目
(1)真机运行
ionic emulate ios
ionic emulate android
(2)模拟器运行
ionic run ios
ionic run android
(3)本地浏览器运行
ionic serve
说明:
建议在代码开发过程中,使用本地浏览器运行;
当需要真机运行时,请使用Xcode、Android Studio分别打开项目下面对应的iOS工程和Android工程,这两个工程目录会在第8步执行构建命令后生成,使用Xcode可以很容易设置好开发者账号,相对于命令行方式更加方便。