ionic6探索笔记——环境搭建及创建项目

官方文档:Installing Ionic - Ionic Documentation

一、环境搭建

1.删除旧版本ionic

npm uninstall -g ionic

2.安装新版本

npm install -g @ionic/cli

值得注意的是,ionic的资源包变为了ionic/cli


二、创建项目

在cmd或终端进入合适的目录,然后运行命令:

ionic start 项目名称 tabs


然后选择项目类型(Angular、React、Vue),这里选择的是Angular,回车

大概意思是是否集成capacitor,这里暂时先选NO,等待安装node_modules


是否创建ionic账号,选择NO,项目创建完成,然后进入创建的项目目录下,输入命令启动服务:

ionic serve 


启动成功!


三、添加平台

3-1 capacitor

3-1-1 添加安卓平台

ionic capacitor add android


没有www文件。尝试运行一下ionic build,然后再次运行添加平台命令,项目中多了android文件夹


因为官方并没有提供直接打包的命令,需要借助android studio来打开安卓项目,在项目中运行命令:

npx cap open android

这样直接启动android studio并打开该安卓项目

对于android studio的安装和android_SDK以及安卓模拟器的配置可以自行了解学习一下,我这里是已经搭建好的安卓开发环境。

点击运行按钮,就可以在模拟器上运行该程序


每次对ionic项目做更改需要把这些更新同步到安卓项目中,需要运行命令:

ionic capacitor copy android

3-1-2 添加iOS平台

在项目目录下运行命令: 

ionic capacitor add ios

报错了,大概是因为cocoapos没有安装或者版本过低,尝试更新一下cocoapos

打开终端,输入sudo gem install cocoapods来升级CocoaPods;

如果遇到

ERROR: While executing gem ... (Gem::FilePermissionError)

You don't have write permissions for the /usr/bin directory.

这个错误的话就改用sudo gem install cocoapods -n /usr/local/bin命令即可。

接下来删除ios文件夹,重新添加ios平台,

根据提示,用xcode打开该ios项目

npx cap open ios

点击运行按钮,在iOS模拟器上查看效果

3-2 cordova

使用cordova添加平台和以前的ionic版本是一样的,首先尝试添加一下android平台:

ionic cordova platform add android

发现报错了,提示在capacitor的项目中不可以使用cordova,如果使用cordova需要禁用capacitor:

ionic integrations disable capacitor

禁用成功。

再次添加安卓平台,提示是否集成cordova,输入y

然后又又又报错了。

这是什么鬼,以前用cordova添加平台没有遇见过,我猜测可能是跟capacitor添加的android文件冲突,于是删除android文件夹再试一次。

果然添加成功!

再尝试一下cordova能不能打包成功:

ionic cordova build android

打包也成功了。


接着又尝试了一下用cordova添加和打包iOS,跟处理android平台的方式一样,先把ios文件夹删除,再进行添加和打包操作,都成功了。

事实证明,新版的ionic版本既可以集成最新的capacitor,也兼容集成cordova。


欢迎对ionic6感性趣的友友们一起探讨和打赏!

你可能感兴趣的:(ionic6探索笔记——环境搭建及创建项目)