idea启动一个angular+ionic+cordova混合开发项目

@[TOC]idea启动一个angular+ionic+cordova混合开发的项目

第一次接触angular+ionic+cordova混合开发项目,引入一个demo项目都比较困难,当时并不知道该如何下手,几经周折总结如下:

1.将项目用idea软件打开

导入项目比较简单,相信大家都会,这里就不一一赘述。

2.导入后截图如下:

idea启动一个angular+ionic+cordova混合开发项目_第1张图片 如图所示,导入会有很多错误。不要着急,我们慢慢来。首先应该修改angular默认端口号。找到项目中的package.json文件,打开找到代码如下,在这里插入图片描述
Angular项目的默认端口号是 http://localhost:4200/, 这里可以修改为任意的空闲端口号,在这里我们还使用默认的端口号。修改如下:
idea启动一个angular+ionic+cordova混合开发项目_第2张图片 设置完成后,右键点击package.json,选择“”“Show npm Script”便会弹出npm命令框。如下所示:
idea启动一个angular+ionic+cordova混合开发项目_第3张图片 出现npm 弹框后,点击start按钮运行,编译完成后显示网页端口号,将端口号复制到浏览器搜索窗口,项目运行成功。如下所示:
idea启动一个angular+ionic+cordova混合开发项目_第4张图片 如果项目全程没有报错,则项目运行成功!可以愉快地进行学习和编程了。

当然中途可能修改完后还会报如下错误:

idea启动一个angular+ionic+cordova混合开发项目_第5张图片 报类似Could not find module 的错误,前提是已经安装了全局淘宝镜像cnpm。

在这里插入图片描述
解决方法如下:
1.cd 到该项目根目录下:使用cnpm安装依赖,命令如下:( 附显示结果如下)idea启动一个angular+ionic+cordova混合开发项目_第6张图片相关依赖安装好,使用如下命令测试,测试项目能否运行成功。
在这里插入图片描述
idea启动一个angular+ionic+cordova混合开发项目_第7张图片运行成功后浏览器会自动跳出项目显示的页面。
idea启动一个angular+ionic+cordova混合开发项目_第8张图片
项目运行成功!

你可能感兴趣的:(混合开发,angular,ionic)