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 的 URLionic 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.jsgulp 是一个基于流的自动化构建工具文件中配置了项目编译过程中执行的构建流事件。大型项目需要自动构建的时候才会去修改相关配置一般不去修改即可。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命令的时候会加载此配置文件中的依赖包。这里只是大概了解了每个文件夹、文件的作用更多的使用方法将在接下来的实际项目中有详细地讲解。