当前位置: 首页 > news >正文

Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置

原文发表于我的技术博客
本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置。
原文发表于我的技术博客

1. Ionic 项目结构

这是初始化创建的 Ionic 项目结构,接下来将一一讲解。

截图

因为 Ionic 使用了 Cordova 技术,所以项目的文件架构基本和 Cordova 的项目类似。

1.1 app 文件夹

项目文件夹,后续的代码编写都将在这里进行,因为使用的语言就是 HTML5/CSS(Sass)/JavaScript,所以项目结构类似于静态网站的项目结构。

1.2 hooks 文件夹

hooks 文件夹 主要放置在提交给 Cordova 处理的时候,自定义的一些动作,主要用于一些自动化处理的动作,如在编译前、编译后、运行前等等时刻插入自己定义好的动作。具体的介绍可以查看其中包含的文件 README.md

1.3 node_modules 文件夹

包含了所有使用 npm 安装的依赖包。

1.4 platforms 文件夹

platforms 包含了 iOS 平台和 Android 平台的项目文件,一般不需要去修改,除非你需要修改一些原生的配置,如需要配置不同平台的推送通知的时候,才需要对其中的相关文件进行修改。

1.5 plugins 文件夹

存储所有 Cordova 插件的位置,注意区别于 npm 安装依赖包的位置。
安装命令如下,{plugin} 是插件的 ID 或者 插件 GitHub 的 URL:

ionic plugin add {plugin}

1.6 resources 文件夹

放置了平台的图标(icon)和启动界面图片(splash),注意适配不同的分辨率,后续章节会作详细介绍。

1.7 www 文件夹

独立的项目,用于在浏览器调试时生成的文件夹,这样项目生成的 cordova/ionic 等编译文件将不在项目文件夹中存在,可以用于单纯的 web 发布使用。具体的配置在下面的 ionic.project 文件中有详细的介绍。里面的 index.html 是 app 的入口。

1.8 config.xml

项目整体配置,配置文件的节点和 Cordova 是一样的,具体的节点解释可以参见这里。

1.9 gulpfile.js

gulp 是一个基于流的自动化构建工具,文件中配置了项目编译过程中执行的构建流事件。大型项目需要自动构建的时候才会去修改相关配置,一般不去修改即可。

1.10 ionic.config.js

配置用于执行 Ionic CLI 时候使用。

1.11 ionic.config.json

可以自定义配置值,供项目读取。

1.12 ionic.project

除了基本信息的配置,还可以在其中添加一些外部的配置,如添加一个 Gulp Watch,用于实现 LiveReload。

"gulpStartupTasks": [
 "watch"
],
"watchPatterns": [
 "./scss/**/*.scss",
 "./www/js/**/*.js",
 "./www/build/index.html"
]

1.13 package.json

项目依赖的包在这里管理,如果项目中丢失或者初始化,使用 npm install 命令的时候,会加载此配置文件中的依赖包。

这里只是大概了解了每个文件夹、文件的作用,更多的使用方法将在接下来的实际项目中有详细地讲解。


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章:

  • 使用HBuilder编辑器进行真机调试运行时提示Waiting for debugger!
  • 交换机端口安全
  • SQLite入门与分析(四)---Page Cache之事务处理(2)
  • Windows上为Apache配置HTTPS
  • [数据恢复答疑]IBM 的RAID5E和RAID5EE适合我吗?
  • 【LeeCode】Two Sum
  • Alexnet参数解释
  • es6的常用语法
  • asp.net 点击girdView中的超链接列复制地址--源码--调试成功
  • 定制用户不使用某个帐号
  • 解读sencha touch移动框架的核心架构(一)
  • DataView(2):RowState
  • Spark学习笔记之相关记录
  • Js实现Repeater全选/反选 功能 终极解决方案
  • MySQL主从复制读写分离及奇怪的问题
  • canvas 五子棋游戏
  • Django 博客开发教程 8 - 博客文章详情页
  • PHP面试之三:MySQL数据库
  • scala基础语法(二)
  • vue 配置sass、scss全局变量
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • 浮动相关
  • 前端临床手札——文件上传
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 突破自己的技术思维
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 阿里云重庆大学大数据训练营落地分享
  • ​低代码平台的核心价值与优势
  • #NOIP 2014# day.1 T2 联合权值
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • #pragma pack(1)
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (Java数据结构)ArrayList
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • (二)linux使用docker容器运行mysql
  • (分类)KNN算法- 参数调优
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (十六)Flask之蓝图
  • (十三)Java springcloud B2B2C o2o多用户商城 springcloud架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)...
  • (转)大道至简,职场上做人做事做管理
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .net core 连接数据库,通过数据库生成Modell
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .Net IOC框架入门之一 Unity
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .NET大文件上传知识整理
  • .net快速开发框架源码分享
  • .NET框架设计—常被忽视的C#设计技巧
  • .vue文件怎么使用_我在项目中是这样配置Vue的
  • @Documented注解的作用
  • []error LNK2001: unresolved external symbol _m
  • [100天算法】-实现 strStr()(day 52)
  • [17]JAVAEE-HTTP协议