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 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 打开文件夹即可导入项目 |