Ionic3学习笔记(一)安装、项目结构与常用命令

本文包含: Ionic3安装、项目结构与常用命令

1. 安装

安装Cordova、Ionic

npm install -g cordova ionic

创建一个新项目,有blank、tabs、sidemenu3种样式可选,tutorial、super、conference为官方Demo,aws为AWS Mobile Hub Demo

ionic start myApp blank
ionic start myApp tabs
ionic start myApp sidemenu
ionic start myApp tutorial
ionic start myApp super
ionic start myApp conference
ionic start myApp aws

浏览器运行调试

cd myApp
ionic serve

2. 项目结构

./hooks => 包含App生命周期中自动执行的操作 ./node_modules & ./package.json => npm依赖项 ./platforms => 添加的平台 ./plugins => 安装的插件 ./resourses => App图标和启动画面 ./src/ => 主要工作目录 ./src/index.html => App主要入口,用来设置脚本和CSS ./src/app/app.module.ts => App入口 ./src/pages => 放置生成的页面 ./src/assets => 放置多媒体文件 ./src/theme/variables.scss => 用于覆盖默认样式 ./www => 浏览器运行调试时自动生成 config.xml => 配置文件 ionic.config.json => 上传到 ionic.io 会被使用 .tsconfig.json & tslint.json => TS相关

3. 常用命令

打印出Ionic运行环境信息

ionic info

更新Ionic到最新版本

npm install -g ionic@latest

生成新的page、provider等

ionic generate [<type>] [<name>]

[<type>]: e.g. component, directive, page, pipe, provider, tabs

在浏览器中运行调试,可打开iOS、Android、Windows3个界面

ionic serve --lab

生成一个平台图标、启动画面

ionic cordova resources ios
ionic cordova resources --icon ios
ionic cordova resources --splash ios

列出所有平台

ionic cordova platform ls

添加、删除、更新一个平台

ionic cordova platform add ios
ionic cordova platform remove ios
ionic cordova platform update ios

编译一个平台并压缩

ionic cordova build ios --prod

添加、删除插件

ionic plugin add cordova-plugin-camera
ionic plugin rm cordova-plugin-camera

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lestat's blog

关于vue中$nextTick的一点使用心得

当下公司在做一个媒体门户网站,后台由另一家公司使用java开发并提供接口,本人负责开发后台页面,使用的是vue-element-admin开发 下面说一下问题场...

67180
来自专栏一个爱瞎折腾的程序猿

为 VUE 项目添加 PWA 解决发布后刷新报错问题

下面这些文件忘记出处是哪,Github也能搜到一些,之前写的 PWA 的 Demo 里面拿过来的~

14710
来自专栏破晓之歌

Vue+Webpack打造todo应用 原

B.vue-loader需要安装15版本以下(参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plug...

41430
来自专栏bboysoul

在输入linux sudo密码的时候显示星号

大家都知道我们在输入linux sudo密码的时候终端是不显示任何东西的,虽然这样安全,但是我们不知道我们按下的密码到底输入进去了没有,如果可以像在网站上登录账...

11720
来自专栏金朝麟的专栏

Express+Less+Gulp配置高效率开发环境

原来用的React+Webpack时,那种同步压缩修改、实时动态刷新页面的感觉真的太棒了。但如果使用Express+ejs+less的话,配置webpack非常...

80400
来自专栏闰土大叔

入职第三天:vue-loader在项目中是如何配置的

这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少?

12010
来自专栏Youngxj

Html5 Canvas多表盘时钟绘制

18840
来自专栏张泽旭的专栏

SMTP邮件发送命令

第一步,远程登录smtp服务器 在命令行窗口输入 telnet smtp.163.com 25 然后回车 第二步,用户登录 输入 he...

34620
来自专栏Golang语言社区

go pprof 及 trace 完整操作指南 GC或性能分析 (windows平台linux平台皆可)

pprof 和 trace 这东西可以分析GC具体的瓶颈位置!!以及每一个线程具体什么时候运行的!!反正各种好处!

13930
来自专栏Nian糕的私人厨房

WebPack 模块化打包工具(下)

本篇博文的内容根据 入门 Webpack,看这篇就够了 该篇文章总结而来,其代码、模块示例、功能拓展部分均有所删减,若是想了解更多关于 WebPack 的详细内...

45150

扫码关注云+社区

领取腾讯云代金券