ionic2最新项目源代码（ionic创建项目）

今天给各位分享ionic2最新项目源代码的知识，其中也会对ionic创建项目进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、非原生App开发的基本步骤（以安卓端为例）
• 2、ionic6探索笔记——环境搭建及创建项目
• 3、Vue+Ionic4，知虎偏行（二）创建及配置项目

非原生App开发的基本步骤（以安卓端为例）

主要使用：

 移动端：ionic、cordova

 后端：CoreThink

一、安装

1.安装node.js

2.安装git

3.安装ionic cordova：

命令行输入：npminstall –g cordova ionic

注：-g表示全局安装，也可以进入指定的目录安装，但这里推荐全局安装，安装后的目录为C:/users/Administrator/AppData/Roaming/npm/node_modules

4.安装Java JDK

5.安装Apache Ant

6.安装Android SDK（从这里开始后面基本以android为例，ios类似）

7.设置环境变量：

①打开计算机-系统属性-高级系统设置-环境变量

②在系统变量中新建ANDROID_HOME变量，变量值为sdk所在目录，如图

③新建CLASSPATH变量，变量值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

④新建JAVA_HOME变量，变量值为jdk所在目录

⑤编辑系统变量中的path变量，不要删原来的变量值，在原值后面添加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\build-tools;%ANDROID_HOME%\platform-tools

注：这里是添加了jdk\bin、jdk\jre\bin、sdk\tools、sdk\build-tools、sdk\platform-tools的路径，互相以英文分号隔开

8.创建项目：

命令行cd进入任何你喜欢的目录，ionic startAnyNameYouLikeblank，如果一切顺利，就会在你指定的目录新建一个你喜欢的名字的文件夹，并在里面初始化一个ionic项目。

9.添加平台

进入刚才新建的项目的目录，命令行输入ionic platform add android

二、在项目目录中有一个www的文件夹，里面的文件有html，js，css等，可随意编写，在platform中的www文件最好不要动它。

三、测试项目

1.进入项目目录，ionic build android编译项目

2.测试项目的方法：

桌面浏览器测试法：ionic serve

模拟器测试法：这个比较烦，而且运行慢，破机子卡到爆，一直没成功，所以略

手机浏览测试法： 自己看吧，略

手机测试法：连上数据线，打开开发者选项，执行ionic run android

四、编写项目

英文太多，翻译不出来

五、发布app，前面的准备就是为了这一步了

1.执行cordova plugin rm cordova-plugin-console，这一步是Before we deploy, we should take care to adjust plugins needed during development that should not be in production mode.

2.执行cordova build --release android，在platforms/android/build/outputs/apk，中会出现***-release-unsigned.apk，最前面取决于取了什么名字

3.使用keytool打包私有密钥：执行keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

4.给没有签名的apk签名：执行jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

5.最后一步，执行zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

六、基本步骤到此结束，可能会出现各种报错的情况，只能具体问题具体分析了，

参考网址：

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-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模拟器上查看效果

使用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。

Vue+Ionic4，知虎偏行（二）创建及配置项目

一般Ionic项目创建可以使用ionic-cli命令，即：

然而查看该命令说明和源码是没有Vue的项目模版的（见 STARTER_TEMPLATES中的projectType ）。

所以使用Vue来创建项目：

这是Vue很基础的东西，安装依赖并运行看下：

此时可以看到项目能正常运行的，一般来说，应用都需要和路由打交道，所以添加下路由：

对Ionic集成，安装ionic相关依赖（其中@ionic/core是组件部分，@ionic/vue是封装成Vue方式调用的接口部分）：

安装完成后，在main.js中添加配置：

再次运行，发现命令行会有告警提示：

同时页面也会报错，显示空白页面，这是一个BUG（前期的版本是没有这个BUG的），我们需要安装ionicons，而且它对版本有要求，要在V4.5.10以下，所以执行：

此时再次运行，没有告警也没有错误提示，但是还是空白页面，调试页面发现有这样一个样式：

我也不知道这是干嘛用的，改了再说：

此时页面看到有东西了， 那我们尝试下ionic的组件能不能用 ，在Home.vue页面添加一个按钮：

可以看到组件渲染出来了，为了和ionic的dom结构保持一致，把App.vue稍微改动一下，变为如下：

我们再试试看事件能不能响应，页面稍微改一下：

运行，发现能正常使用的。

为了支持Ionic的路由和使用其动画和样式，@ionic/vue里在vue-router的基础上做了封装，所以处理一下，打开router.js，修改一下（把Router替换为IonicVueRouter即可）：

此时看到路由也是正常使用的。

众所周知，Ionic默认是使用android/md（Material Design）模式的，如果想使用ios模式，在html上添加mode="ios"，即：

index.html添加meta项：

至此，基本项目配置就完成了，后续再谈论更多细节。

ionic2最新项目源代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于ionic创建项目、ionic2最新项目源代码的信息别忘了在本站进行查找喔。