搭建 Angular + Cordova + Ionic 集成开发环境
| IDE | VS Code | WebStorm | IDEA |
|---|---|---|---|
| 简介 | 轻量 | 前端开发 | 全栈开发 |
| 插件 | Angular | Cordova Lombok | |
| 准备 |
建立基本开发环境
1. 安装 Node.js 注：使用8~9版的 Node.js 安装后运行时报错“Cannot find module '@ionic/app-scripts'”，而使用6~7版的 Node.js 安装则正常。 注：以下命令可以在命令窗口，亦可以直接在 IDEA 或 WebStorm 的 Terminal 窗口 (Alt+F12) 中输入运行。 2. 安装 Angular npm install -g @angular/cli 3. 安装 Cordova + Ionic npm install -g cordova ionic |
||
| Angular |
1. 创建 Angular 项目 进入项目文件夹 /myProject ng new firstangular 2. 安装依赖 进入文件夹 /myProject/firstangular npm install 3. 启动服务 ng serve --open 4. VS Code 打开文件夹即可导入项目 5. 创建组件等 在 VS Code 的 app 下新建组件文件夹，再从命令窗口进入工程文件夹。 ng g component components/header，创建组件 |
同右 |
1. 创建 Angular 项目 选择“Create New Project”->“Static Web” -> “Angular CLI”创建新项目。 开发工具会自动创建项目及其依赖。 2. 启动服务 右键点击“package.json”，选择“Show npm Scripts”，双击 npm 窗口中的“start”即可。 3. 处理出现的错误 鉴于国内网络环境，可能报“npm WARN @angular-devkit/schematics@0.0.51 requires a peer of @angular-devkit/core@0.0.28 but none is installed. You must install peer dependencies yourself.”、“npm WARN @schematics/angular@0.1.16 requires a peer of @angular-devkit/core@0.0.28 but none is installed. You must install peer dependencies yourself.”等错误。 自己动手安装相关依赖，如下：“npm install @angular-devkit/core”、“npm install @angular-devkit/schematics”、“npm install @schematics/angular”等。 4. 更改启动端口 修改“package.json”，将“scripts”->“start”改成“ng serve --poot xxxx”。 5. 创建组件等 右击要创建组件的位置，选择 New -> Angular CLI，从窗口中选择“component”。 |
| Ionic |
1. 创建 Ionic 项目 进入项目文件夹 /myProject ionic start ionic3Demo tabs 注：ionic3Demo 是项目名，tabs是模板 2. 安装依赖 进入文件夹 /myProject/ionic3Demo npm install 3. 启动服务，并在浏览器中打开 ionic serve 4. VS Code 打开文件夹即可导入项目 |
||
搭建 Angular + Cordova + Ionic 集成开发环境相关推荐
- 搭建QT和VS2010集成开发环境
转载请注明出处:http://blog.csdn.net/xiaowei_cqu/article/details/7330759 在网上搜了各种教程,(尤其是这篇各种转载http://tech.tec ...
- Cordova/Ionic Android 开发环境搭建 - Windows系统
电脑操作系统 - windows 10 IDE - WebStorm 2019 Node v10.15.3 npm v6.4.1 Ionic v3 Angula v5 Cordova 移动设备 - 机 ...
- 使用IntelliJ IDEA 13搭建Android集成开发环境（图文教程）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- 使用Android Studio搭建Android集成开发环境
一.Android Studio简单介绍 2013年GoogleI/O大会首次发布了Android Studio IDE(Android平台集成开发环境).它基于Intellij IDEA开发环境,旨 ...
- 使用Android Studio搭建Android集成开发环境（图文教程）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- 【软件使用】Windows下的Objective-C集成开发环境搭建（IDE）
Objective-C是苹果软件的编程语言,想要上机学习.调试,有一个集成开发环境(IDE)方便很多.有三类方法搭建Objective-C的集成开发环境: 1) 使用苹果的平台,集成开发环境使用X ...
- windows和linux中搭建python集成开发环境IDE——如何设置多个python环境
本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...
- linux pythonide_【转】windows和linux中搭建python集成开发环境IDE
本系列分为两篇: 使用的系统及软件 Ubuntu / windows Python 2.7 / python 3 Pycharm 2.6.3 Openjdk Postgresql 9.1 Virtua ...
- linux系统安装python集成环境_windows和linux中搭建python集成开发环境IDE
使用的系统及软件 Ubuntu / windows Python 2.7 / python 3 Pycharm 2.6.3 Openjdk Postgresql 9.1 Virtualenv Virt ...
最新文章
- redis 生成dump.rdb文件
- php程序员笔试题库,2017年初级PHP程序员笔试题
- 浅析Java线程的三种实现
- BiGAN-QP：简单清晰的编码 生成模型
- boost::cv_status相关的测试程序
- java 读取图片给 matlab_如何将MATLAB图像处理程序转换为java？
- Pandas 文本数据方法 cat()
- api 定位 微信小程序 精度_微信小程序城市定位(百度地图API)
- 创建vue项目常用命令
- win的反义词_133个英语单词反义词，小学生必须要掌握！为孩子收藏吧
- 一位业内人士关于奶粉各品牌的评价（转载）
- npm installCould not resolve dependency：peer... 原因和解决方案
- 机械臂避障与轨迹规划仿真
- 在linux下用c语言编程软件下载,在Linux下进行C语言编程
- 金三银四过后整理出的阿里最新Java程序员面试题目（2018.4月）
- Android显示MP3专辑封面
- 莫言教学常启迪学生多动脑 主张把自己当罪人写-莫言-诺贝尔文学奖-兰传斌
- linux卸载，安装win7碰到的问题总结，使用MbrFix.exe修复mbr
- 人脸识别资源大列表（人脸识别检测，关键点检测 看这些就够了）
- 【第19天】给定一个整数 n，请你打印出 n 层杨辉三角 | 杨辉三角的应用