在ionic CLI v4.8.0版本创建项目时,会询问是创建ionic3还是ionic4项目,然而更新到 ionic CLI v4.10.2(latest)时,这个询问提示消失了,直接默认创建ionic3...项目,而且看参数是没有创建ionic3项目支持的,于是,我上Github发了个issue: How to create ionic3 project by ionic CLI v4.10.2(latest...) 结果ionic团队还是挺给力的,马上作出回复,并一天就解决并发布了新版本,详情进上面链接看。...所以我们想创建ionic3项目可以这样做,先升级ionic-cli到最新版本: npm i -g ionic 此时显示版本为ionic@4.10.3了,然后试着创建项目: ionic start tabTest...--type=ionic-angular 命令完成后就发现是ionic3项目了。
1.安装ionic cli //Windows npm install -g ionic@latest //mac sudo npm install -g ionic@latest 2.创建项目 创建...ionic2的项目 默认是创建ionic2项目(--type=ionic-angular )可以不写类型 ionic start myNewProject 创建ionic1的项目 ionic...,pipe,provider,tabs) name 正在生成的组件的名称 可选参数 选项 描述 --no-module 不要为组件生成NgModule --constants 为惰性页面生成页面常量文件...# 创建服务 ionic g provider userService # 创建通道 ionic g pipe myPipe 生成的项目目录结构 ?...目录结构 4.启动项目 ionic serve
-g cordova 这样会安装最新版本的cordova, -g 代表全局安装 测试是否安装成功 cordova -v 创建项目 以上就已经安装好了 ionic cli可供使用,通过 ionic...cli,可以非常方便的创建一个ionic项目。...同时,利用该工具创建ionic项目的时候可以选择不同的模板,也可以选择不适用模板,只需要命令后面的一个参数即可,例如,以下命令将创建一个 带有 tabs 模板的 ionic项目,通过ionic start...对应的,还可以使用创建没有模板的应用: ionic start inStart blank 该命令会创建一个基于ionic 最新版本的应用 高本版的ionic cli还有很多非常好用的功能,比如 ionic...ionic cli 创建应用,ionic网还介绍了一种使用可视化工具Creator创建应用的方法,具体的不太清楚,有兴趣的可以尝试。
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使用...开发(5) – 实现页面功能 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端 Ionic是什么?...Ionic 在发布了1.0版本以后,被越来越多的关注和支持,社区也十分的活跃。本文将继续上篇,使用Ionic 框架来开发应用。 1....提升权限执行 sudo 即可: sudo npm install -g cordova ionic Ionic 有三种默认项目模板: i). blank –> 空工程模板, ii). tabs -...使用 ionic start DeliveryApp blank 创建这个 App应用,DeliveryApp 是咱们这个实例的项目名称。
官网——开发文档 Ionic源码信息——项目动态 Ionic Conference App——官方示例 1、创建项目 首先配置好开发环境,若不清楚,请先阅读此文: 【开发指南】(一)Ionic3...开发环境配置 开发ionic项目,我们经常需要使用ionic-cli,其内置了很多命令,基本每个命令都带可选的参数,如参数--help,要想知道某个命令的详情,在敲入命令后面加上--help即可,如敲入以下命令...Generate 现在,正式创建一个项目,打开命令行窗口,首先cd到要存放的目标目录,使用start命令来创建一个名字叫myDemo的新App: ionic start myDemo 这个命令将下载项目模板...想华丽酷炫的还是简单简洁的,可以选用相应的动画;如想所有平台样式一致,就加个mode: 'ios';想选项卡统一在下面就加个tabsPlacement: 'bottom';不要后退文字,则设backButtonText...2)习惯使用ionic-cli 如使用cli提供的generate指令。
此外,ionic使用AngularUI Router来实现前端路由。 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。...ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。...由于ionic使用了HTML5和CSS3的一些新规范,所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用,有时会发生莫名其妙的问题。...比如,我们使用ion-tabs指令就可以实现一个功能完备的选项卡: ......ionic.js 没有使用AngularJS内置的ng-route模块,而是选择了AngularUI项目 的ui-router模块。
为了从软件开发的预算效益和时间效益的角度来寻求两个平台之间的妥协,引入了混合和跨平台的框架。...Ionic Framework 对于初学者是很友好的,它具有先进的CLI(有助于启动各种有用的功能)。该框架还有大量的便宜插件(价格不超过20 cu),开发人员无需使用第三方解决方案。...使用 React Native,可以为每个选定的平台本地组件创建不同的选项。 ● 可建模解决方案。 Ionic 是一个适合“一次编写,随处运行”的框架。这意味着,对正确书写和结构化的要求更高。...Ionic基于MVC-framework和Angular。因此可以在不同视图上区分相同的数据。所以可以让项目中成员的工作流程保持独立。...Ionic 在这方面有点落后。它只能提供 Live Reload 选项,而且在一些情况下还不能使用。 ● 学习曲线。
,连接情况也不太保障; 2、使用cnpm,淘宝把npmjs.org在国内做了个镜像,封装了新的cli,其用法跟npm用法完全一致,只是在执行命令时将npm改为cnpm。...ionic-cli,是为了便于我们开发编译部署ionic项目的命令行,而ionic-angular其实才是我们常说的ionic框架,每次修复bug、更新功能指的就是它,在package.json里可以查看版本和相关依赖...(也可以项目目录敲npm list ionic-angular)。...两者的版本并不是一致,有时候ionic-angular更新了多个版本,而ionic-cli不需要更新,而ionic-cli一般是bug修复、提高命令执行的性能,或调整ionic项目结构时才需要更新。...六、安装Git(cli)——可选,但强力建议 因为很多开源资源是放在git上的,有时它们不完全满足自己的需求,这时可以克隆下来做微调然后使用本地安装使用。
昨天angular5和ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的白老鼠建议选用一个最近不用维护的项目。..."@angular/common": "5.0.1", "@angular/compiler": "5.0.1", "@angular/compiler-cli": "5.0.1", "@angular...: { "@ionic/app-scripts": "3.1.0" "typescript" : "2.4.2" } 接着执行命令重新安装依赖: npm install 二、修改项目文件 我们可以先看下...代替,其编译选项enableLegacyTemplate也已经失效; compiler: 编译选项useDebug从v4版本已经弃用且无效,现在移除; common: NgFor...,但从项目应用上只是个别地方要调整,基本向下兼容,故angular4到angular5的项目升级的过程还是比较平缓的,对于大多数项目,主要应对的是Http模块、Router还有管道的变更。
环境搭建 参考官网使用即可: 安装node,使用 Homebrew 进行安装 brew install node 安装[Weex CLI(weex-toolkit)] (https://github.com...其中init和create命令需要注意一下,常规混合式应用使用create创建weexpack项目。...当然weexpack项目也可以如下直接装weexpack的CLI,通过该CLI构建及维护项目,只是weex-toolkit已经集成weexpack了,所以也不是必要。...weex ionic weex ionic 2. UI weex好像自身不带UI框架,但是可以很简单地集成weex-ui,而ionic自带UI,两者打个平手吧。...页面展示 weex有单页和多页面方式,直观就是一个webview显示所有页面,另一个是多个webview各显示一个页面,而ionic只有单webview显示,所以从某种情况来说,多webview时,weex
打开ng-zorro-mobile官网,侧边栏很醒目地标示了在ionic中使用: ?...ionic使用 众所周知,ionic自身也是一个UI框架,涵盖绝大多数常用组件,但有些组件没有或不好用,就要借助第三方组件,现在有了ng-zorro-mobile,对ionic有了极大的补充。...在ionic中使用ng-zorro-mobile非常简单,先是创建项目,有ionic相关经验对下面几行代码非常熟悉: #全局安装ionic-cli npm install -g ionic #使用ionic-cli...创建项目 ionic start PROJECT-NAME 然后接入ng-zorro-antd-mobile,其中有两种方式: 使用angular-cli只需要以下一句命令即可完成模块初始化配置(前提安装了...angular-cli): ng add ng-zorro-antd-mobile 使用npm,则先安装模块: npm install ng-zorro-antd-mobile --save 然后在 app.modules.ts
第一次亲密接触 第一次接触Ionic,是在2015年,并在年中的时候第一次在正式项目中使用,那时它才是Ionic1的Alpha版,每次版本更新仍有不少坑,但在可接受范围,而且Ionic team一般会很快地修复...因为有Angular1(Angularjs)的基础,所以上手Ionic1很快,它全家桶的功能,省却了配套技术选型的烦恼,同时,它比较齐全的cli命令,使得项目的创建到发布都比较简便。...---- 新欢与旧爱 随着Ionic4的推出,自己也较早时间去踩坑,从去年中创建第一个Ionic4项目开始到现在,指导开发了几个Ionic4项目,可以确切地说,Ionic4已经稳定了(仅限于Angular...一些从Ionic3过渡到Ionic4的人仍旧以Ionic3的思维去做开发,抱怨这个Ionic3可以,怎么到Ionic4不行?...像我所在的公司,我可以决定选型的技术,就算我认为Angular比Vue更适合于中大型项目的开发管理,虽然我可以固执地要求使用Angular,但考虑到招人的成本、框架的特点和国内的趋势,一些项目我会考虑使用
ionic3一个完整项目,一般会有以下文件夹: ?...在一些需要原生的需求目的,或者基于性能要求的目的,ionic提供了很方便调用原生(利用Cordova)的使用接口,包含配置和扩展,那就是第一张图里其它目录的角色(黑色粗体为重要项): hooks:cordova...启动屏资源,在此目录下的资源通过下述命令会把资源按分辨率生成到原生项目目录中,省却自己逐个调整分辨率及拷贝的繁琐工作: ionic cordova resources 或只针对单个平台的: ionic...---- tsconfig.json: TypeScript项目的根目录,指定用来编译这个项目的根文件和编译选项。 tslint.json:格式化和校验typescript。 那怎么理解这些文件呢?...另外它们的名字也是可变的,只是基于约定大于配置的概念,而且利用ionic-cli命令行生成文件,如ionic g pipe date会生成到上述默认文件夹名称中,所以建议保持一致。
ionic可以很方便的安装cordova插件,最新ionic-cli要求cordova插件里面有package.json和plugin.xml才能安装成功,如果缺失,请自行补上,而原来旧的cli不要求package.json...文件(插件目录里的,不是ionic项目里的)。...ionic1时期,除了使用cordova插件外,更方便使用插件是用ng-cordova,到了ionic2及以上,ng-cordova又演变成了ionic-native,ionic-native其实不是插件...DemoPlugin.doSomething(); 这种方式的弊端是非常依赖cordova文档,如DemoPlugin不会关联到cordova插件源码,换句话说DemoPlugin点后面不会有相应的方法或对象,从而不能了解其使用信息...一次,但是绝大多数插件没有使用就封装进来就显得很冗余了,特别是对于移动端对资源特别苛刻的情况下,开发者的意见越来越大,于是ionic-native被重构:加了@同时,除了core外,其它拆分成一个个模块
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/...替换这个前缀,可以在执行命令时加上参数选项: --prefix=prefix:指定组件 selector 取值的前缀,默认 app。...component": { "styleext": "scss", "spec": false, "prefix": "" } } 注意:第一个是配置ionic-cli...,第二个是配置angular-cli。
创建Vue项目并运行 使用Vue来创建项目: npm install -g @vue/cli vue create envt-iot-overall 这是Vue很基础的东西,安装依赖并运行看下: cd...envt-iot-overall npm i npm run serve 此时可以看到项目能正常运行的,一般来说,应用都需要和路由打交道,所以添加下路由: vue add router 安装Ionic依赖...为了支持Ionic的路由和使用其动画和样式,@ionic/vue里在vue-router的基础上做了封装,所以处理一下,打开router.js,修改一下(把Router替换为IonicVueRouter.../views/About.vue') } ] }) 此时看到路由也是正常使用的。...修改模式 众所周知,Ionic默认是使用android/md(Material Design)模式的,如果想使用ios模式,在上添加mode="ios",即: <html lang="en"
有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。...一、项目差异 那现在来看看怎么用ionic4,首先,我们还是以传统的angular来使用之: ionic start [options] 而示例命令有: ionic...ionic start myApp tabs --type=angular ionic start myApp blank --type=ionic1 其中,创建使用原生功能的项目,除了Cordova...不带参数创建的是ionic3项目): ionic start myApp tabs --type=angular 当然也可以用angular-cli创建普通Angular项目,然后npm添加@ionic...Ionic过去使用的典型Push/Pop风格导航仍然可用,您甚至可以直接通过Ionic的Web组件使用这种导航方式,但推荐的方法是使用Angular Router。
官方文档 全局安装ionic脚手架 npm install -g @ionic/cli 创建一个app项目 myApp为项目名 ionic start myApp tabs --type vue 项目启动...npm run serve ionic5是和Vue3搭配的,这里需要提前学习Vue3的语法 项目文件名是为Ts,目前只会Js.我们把项目改为JS语法 用Js来写 文档更改方法 删除掉Ts依赖 npm...uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript...@vue/eslint-config-typescript router/index.ts和main.ts把ts文件名改为js 从. eslintrc.js中删除@vue/typescript/recommended...和@typescript-eslint/no-explicit-any: ‘off’ 从router/index.js中删除Array 删除shims-vue. d.ts
安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 的浏览器界面如下,最左边可以看到打开的是本地的 expo 得调试台,选择本地...npm install -g @ionic/cli ionic start myIonicApp blank --type vue ionic serve █ 看起来还是比较简单,但是需要安装的东西比较多...npm install -g ios-sim brew install ios-deploy 然后在项目目录先 build 项目,然后我们直接使用 Ionic Cli: npm run build...同样是需要先安装 NativeScript 的 Cli 工具: npm install -g nativescript 过程中会遇到从 codeload 下载依赖,可以设置代理或者修改 codeload...其他框架中 AVM 和 Ionic 各有优势,但是从使用体验,上手难度,社区情况来看,国内的 AVM 肯定更适合国内开发者一些,毕竟有本土化,云端集成,而且 debug 体验也很惊艳。
安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 的浏览器界面如下,最左边可以看到打开的是本地的 expo 得调试台,选择本地...npm install -g @ionic/cli ionic start myIonicApp blank --type vue ionic serve █ 看起来还是比较简单,但是需要安装的东西比较多...npm install -g ios-sim brew install ios-deploy 然后在项目目录先 build 项目,然后我们直接使用 Ionic Cli: npm run build ionic...同样是需要先安装 NativeScript 的Cli 工具: npm install -g nativescript 过程中会遇到从 codeload 下载依赖,可以设置代理或者修改 codeload...其他框架中 AVM和 Ionic 各有优势,但是从使用体验,上手难度,社区情况来看,国内的 AVM 肯定更适合国内开发者一些,毕竟有本土化,云端集成,而且debug体验也很惊艳。
领取专属 10元无门槛券
手把手带您无忧上云