1、下载node.js 百度搜索node.js官网，下载最新的node.js,傻瓜式安装即可，安装完成之后，使用命令（windows+R）CMD执行node -v和npm -v命令，返回版本号表示已安装成功...2、安装Ionic 上面步骤成功之后执行npm install -g cordova ionic命令安装cordova和ionic，安装完执行ionic -v，返回版本号表示已安装成功。...第二节：创建项目 1、创建项目 我想在E盘的ionic文件夹下创建一个项目使用命令执行：e:，然后：cdionic，进入执行：ionic start 项目名称 --type=ionic-angular...创建之后可以使用ionic serve命令查看效果，使用ionic build 会生成www目录，然后我们www的目录下文件放到服务器上的IIS就可以使用手机访问。...2、创建页面（组件） 我使用命令创建about页面，会帮我们生成一下文件。 1.创建命令：ionic g page 页面名称。 2. app.module.ts 引入声明组件。
环境搭建 参考官网使用即可： 安装node，使用 Homebrew 进行安装 brew install node 安装[Weex CLI（weex-toolkit）] (https://github.com.../weexteam/weex-toolkit) sudo npm install -g weex-toolkit 如果提示.xtoolkit的权限问题，则执行下述命令后再次安装： mkdir ~/.xtoolkit...&&chmod 777 ~/.xtoolkit 安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数： ?...网页测试 运行命令即可： weex run web 或者npm命令运行： npm run serve 2....direct ory” 我们打开platform/android下的app/build/outputs/apk/，发现文件名为weex-app.apk，而不是playground.apk，所以找不到
本文包含: Ionic3安装、项目结构与常用命令 1....安装 安装Cordova、Ionic npm install -g cordova ionic 创建一个新项目，有blank、tabs、sidemenu3种样式可选，tutorial、super、conference...ionic start myApp tutorial ionic start myApp super ionic start myApp conference ionic start myApp aws.../plugins => 安装的插件 ./resourses => App图标和启动画面 ./src/ => 主要工作目录 ....常用命令 打印出Ionic运行环境信息 ionic info 更新Ionic到最新版本 npm install -g ionic@latest 生成新的page、provider等 ionic generate
node（含npm）——必须 安装完我们常会用到以下命令：npm install -g 模块 或者 npm install 模块 ，有-g表示全局安装，没有-g表示当前项目安装 输入npm...-v打印版本，检查npm是否安装成功，同样的，后续说明的nrm -v，ionic -v，cordova -v也是用于检查是否安装成功。...三、安装nrm——可选，但强烈推荐，中文意思是“node源管理器” 执行以下命令即可： npm install -g nrm 为什么装nrm？...3、直接用npm，但给它设置代理，如代理地址映射到淘宝的源，像下面这样： npm install ionic -g --registry=https://registry.npm.taobao.org...六、安装Git（cli）——可选，但强力建议 因为很多开源资源是放在git上的，有时它们不完全满足自己的需求，这时可以克隆下来做微调然后使用本地安装使用。
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html JDK需要配置两个环境变量：（如果已配置就无需再配置...安装ionic和cordova 安装命令 命令行输入 `npm install -g cordova ionic` 安装示意图： ?...安装示意图 如果安装不了，可以试试国内镜像安装，首先安装cnpm，执行npm install -g cnpm --registry=https://registry.npm.taobao.org命令安装...然后执行命令cnpm install -g cordova ionic安装ionic和cordova 查看是否安装成功： 查看ionic版本 `ionic -v` 查看cordova版本 `cordova...使用ionic命令行创建新项目 打开cmd执行'ionic start' ? 然后输入一个项目名，回车 ? 然后按下tab键选择一个默认的模板，按回车。比如我这里选择的是blank模板。 ?
ionic可以很方便的安装cordova插件，最新ionic-cli要求cordova插件里面有package.json和plugin.xml才能安装成功，如果缺失，请自行补上，而原来旧的cli不要求package.json...ionic1时期，除了使用cordova插件外，更方便使用插件是用ng-cordova，到了ionic2及以上，ng-cordova又演变成了ionic-native，ionic-native其实不是插件...cordova插件常用功能是添加、移除和显示已安装插件列表，依此为以下命令： ionic cordova plugin add DemoPlugin ionic cordova plugin rm DemoPlugin...ionic cordova plugin ls 当安装完cordova插件后，一般有两种方式调用cordova插件： 1、基于cordova常规调用方式 若DemoPlugin.doSomething...2、基于ionic-native调用 早期的ionic-native是一个全部插件的封装调用库模块，随着插件越来越多，封装的ionic-native就越来越大，虽然只需import ionic-native
现有的Cordova插件能满足平时大部分的开发需求，然而，有时候找不到合适的插件、或对找到的插件有不满意的地方，那就要动手去做或改写一个插件，这时候就要了解一些Cordova插件的相关知识。...1、首先安装plumam命令行工具 npm install -g plugman 2、安装完之后，创建plugin 使用plumam创建插件的命令是： plugman create --name pluginName...四、安装已开发完成的插件 如果没有现成的项目，可以创建一个新的cordova项目来测试： cordova create hello com.example.hello HelloWorld 然后像平常添加插件一样...，运行如下命令：（add 后面为插件所在本地或网络路径）： cordova plugin add /Users/cordova/MyToast 如果已有项目且是ionic项目，则命令前追加上ionic...ionic cordova plugin remove XXXXX(你的plugin_id) 查看已安装插件 ionic cordova plugin list
3.x Angular：4.x Cordova：7.x 工具准备 安装Node node下载 下载完成之后：解压 》 配置环境遍历 》 测试 node自带npm，node安装成功，npm也就安装成功...测试命令 node -v npm -v 安装Ionic command-line tools 利用npm包管理器安装 ionic command-line tools npm install...-g ionic 这样会安装最新版本的ionic , -g 代表全局安装 测试是否安装成功 ionic -v 安装Cordova cordova是用来打包的，也就是让js有能力调用原生设备接口...，利用npm包管理器安装 cordova npm install -g cordova 这样会安装最新版本的cordova, -g 代表全局安装 测试是否安装成功 cordova -v 创建项目...同时，利用该工具创建ionic项目的时候可以选择不同的模板，也可以选择不适用模板，只需要命令后面的一个参数即可，例如，以下命令将创建一个 带有 tabs 模板的 ionic项目，通过ionic start
在开始之前我假设你已经了解了如下概念： Java JDK Apache Ant Android SDK NodeJS 以上名词这里就不赘述，如果有不清楚的可以自行查阅 安装步骤 Ionic 官方教程：...nmp 安装 Ionic 和 Cordova 完成以上几步需要配置的环境就搭建完成了，接下来就只需要在控制台输入简单的几行命令就可以安装 Ionic 和 Cordova 啦。...新建虚拟机：打开 Android SDK 安装目录下的 AVD Manager.exe 选择新建 连接手机：直接通过数据线连接真实设备 ionic run android 到这一步系统就会打开虚拟机或者在真实设备运行简单的示例...其它 --prod 的作用 在编译命令的最后加上 --prod 会让 app 的启动速度加快，但构建速度会变慢。...build android --release编译即可，在 /platforms/android/build/outputs/apk 下就会生成已签名的安装包 android-release.apk
然而，如果只是本地网页这么简单的话，它和在线网页的没啥区别，只是速度会快些而已，但作为混合式应用，调用原生功能是最基本的要求。...的命令钩子，用于编译和打包； node_modules：js库——node管理的依赖包（通过命令npm install 包名或路径安装）； platforms：ios、android等可选平台生成的原生项目...(通过命令ionic cordova platform add 平台名称后生成，本来支持wp的，但看最新命令显示貌似已经移除了，见如下): StreamdeMacBook-Pro:appetite woodstream...android ~6.2.2 blackberry10 ~3.8.0 (deprecated) browser ~4.1.0 osx ~4.0.1 webos ~3.7.0 plugins：已安装的...package.json: node安装模块时的依据文件，在里面配置的内容，在执行npm install命令后会生成到node_modules目录。
显示这样表示安装成功 3.安装ionic和cordova 安装好node后安装 ionic和cordova，安装ionic和cordova 比较简单。...在命令窗口输入如下指令就好了 npm install -g ionic cordova 检测是否安装完成 ionic -v cordova -v ?...显示上面版本就ok了 4.创建ionic项目 在命令窗口输入 ionic start ionic tabs --type=ionic1 //后面 --type=ionic1 是生成ionic1项目。...path环境变量 配置好之后然后查看是否安装成功 gradle -v ? gradle安装成功 至此然后我们在项目根目录执行 ionic cordova build android ?...安装android -sdk-25 安装完成后，重新打开命令窗口然后执行 cordova build android 然后你惊喜的会发现你会build成功。
用于ionic开发的插件推荐： Npm Intellisense 模糊查询模块，已安装模块快捷导入，未安装模块提供一键下载安装，你还在考虑什么？...ts importer Types auto installer 当安装一个第三方js包时，如： npm install --save lodash 插件会自动执行下属命令安装响应...auto-import ionic 2 Commands with Snippets 有了它，我们不用手动敲打cli的命令来创建各种组件，只需要在要创建目录右键选择，输入名称即可； ionic2...-command snippets 也可以html 中敲入以下命令，快捷创建ionic的标签，但有些不全 i2-list //add a ionic list with...-vscode 适用于不太记得cli命令，或不太乐意手敲命令的人 Ionic Serve Ionic Emulate Android Ionic Run Android Ionic Emulate
开发环境配置 开发ionic项目，我们经常需要使用ionic-cli，其内置了很多命令，基本每个命令都带可选的参数，如参数--help，要想知道某个命令的详情，在敲入命令后面加上--help即可，如敲入以下命令...，安装 node_modules，配置项目的相关信息等。...当出现下面内容时，说明项目创建成功。 ?...成功提示 其中，我们可以cd myDemo进入到项目，然后根据上图，敲入命令在浏览器预览： ionic serve 也可以两步并作一步执行： cd myDemo && ionic serve 命令执行完...成功运行界面 如果你的是苹果系统，装了xcode，可以敲入以下命令直接在真机或模拟器中运行。
安装Ionic 接下来正式安装Ionic，使用命令行工具： $ npm install -g ionic cordova 如果没有管理员权限，可以使用sudo命令（linux下）。 ?...通过命令行窗口安装ionic cordova npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher...创建Ionic项目 报错了undefined,先按提示用安装命令升级下cordova试试： npm install -g cordova ?...安装后创建工程成功。...创建项目成功 测试运行项目 进入项目目录 cd MyIonic2Project 启动 ionic serve 启动过程需要一点时间，如下图所示： ?
下载后点击下一步一步步安装，安装完nodejs npm也同时安装完成 （2）新建ionic 文件夹，并在控制台进入此文件夹 假如在e:盘中建个ionic的文件夹，敲cmd打开控制台...，输入e:回车，接着输入cd ionic,进入ionic文件夹 （3）安装ionic 输入命令npm install -g ionic@beta 我的电脑这步怎么都安装不成功...，在网上查找，安装ionic之前先输入命令npm config set proxy null （4）在ionic文件夹中start ionicdemo2, ionic start...ionicdemo2 --v2 ( 5 ) 然后启动模板页要在控制台上进入 ionicdemo2 输入ionic serve ionic $ q 关闭服务 如果在ionic的文件夹中没有...platforms文件夹，可以打开Ionic Lab在里面安装 等所有都安装完查看下cordova -v 有没有安装cordova，没有的话npm install -g cordova 如果ionic
前提需要安装node.js 官方文档：https://ionicframework.com/docs/intro/installation/ 安装脚手架 npm install -g ionic...cordova 创建项目 ionic start myApp tabs start 命令代表创建新app项目....生成app 前提 安装java jdk 需要1.8.0及以上，但是java9也不行 安装Android Studio ionic cordova run android --device ?...使用同事的电脑尝试，无需安装java环境和android环境这一步是能通过的。 我们来看下ionic项目文件 ?...image.png ionic cordova build android --prod --release 成功了 ? 成功生成了apk 这个apk拷贝到手机上无法安装，因为没有签名。
ionic-cli或angular-cli能很好地辅助开发，其中generate很方便地创建各种模版内容，即： ionic generate/ng generate或简写为ionic g/ng g...比如我们创建一个组件，执行： ng g c test1 或 ionic g c test1 就会创建4个文件： > ng generate component test1 CREATE src/app/...test1.component.ts打开会是这样： selector: 'app-test1', 其中“app”就是默认加的前缀，很多时候新人会忽略到这个前缀，以的标签来调用，往往就会找不到组件并报错...替换这个前缀，可以在执行命令时加上参数选项： --prefix=prefix：指定组件 selector 取值的前缀，默认 app。...即敲： ng g c test1 --prefix wood #前缀至空 ng g c test1 --prefix 但每次打稍显麻烦，也容易打错，其实可以在angular.json直接配置，如： "schematics
快速入门 基于上面的系统环境安装的NodeJs，我们先安装Ionic CLI。...下面分别区分Windows、Linux、Mac的命令行代码来安装： Windows npm install --g ionic Linux和Mac sudo npm install --g ionic...下面通过命令创建工程 ionic start ExpenseTracker blank && cd ExpenseTracker 上面的命令使用了Ionic的空模板”blank”, 创建了一个名为...“ExpenseTracker”Ionic工程; 创建成功后，我们进入新建的ExpenseTracker目录。...然后我们通过Ionic命令启动Web站点 ionic serve 该命令会启动Web服务，同时会使用默认浏览器启动页面。
UI选项卡 所以我们在cli命令行创建一个基于选项卡模版的应用： ionic start appetite tabs 等项目创建成功后，我们执行下面的命令： cd appetite && ionic serve...image.png 注：命令行可以使用Ctrl+C终止当前命令来执行其它操作 二、项目配置 ? 项目配置.png 注：主要修改ID。...作为应用的唯一识别身份，避免和现有的应用ID重复，如在ios打包发布，若发现有相同ID，则无法打包成功。...为了入手简单点，先不使用懒加载，于是使用命令行创建页面时加上--no-module参数： ionic g page person --no-module 页面生成后在app.module.ts里添加配置...这样如果访问你网页的电脑没有安装你定义的第一个字体，它会用第二个，以此类推。如果都找不到，就用浏览器的默认字体显示你的网页 2. 留意到UI上有这样的颜色说明： ?
也是最新版的，否则就麻烦了，会老是提示 cordova -v 不是内部命令，也就是安装成功了，会导致命令行不能用 好了 下面详细说说该安装什么东西，第一步工具一定先安装 1....安装完cordova之后，其实这个时候就可以创建一个web app了，具体的做法我就不说了，网上很多，我们需要去使用ionic 开发hydride ａｐｐ 所以我们这时候需要去安装ionic 命令行也很简单的...安装完成之后你可以去看看：ionic －ｖ 查看版本号，如果提示ｉｏｎｉｃ不是内部命令，那么你安装失败了，再重新来一次吧 ９. ...安装完成之后，就是开始做用ionic 命令来做一个项目了 命令行也很简单，就是第一次执行的时候千万别断网了，时间比较漫长，因为要下真多东西，反正他自己就在那里慢慢的运行，你看着就行 ?...照着这个来就行了，如果是浏览器运行 就键入命令：ionic ｓｅｒｖｅ 就行了 ? ? ? ? ? 就到此为止吧，不懂的留言 成功安装一次之后就很简单了，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
