搭建 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/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.”、“npm WARN @schematics/[email protected] requires a peer of @angular-devkit/[email protected] 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 打开文件夹即可导入项目