Ionic2实战-框架和模块目录结构说明和设计

前言

当我们初始化完项目以后是不是就可以愉快的进行开发了？好的，Idea打开项目，等等，这些文件和目录都是啥意思，如下图：

项目初始化以后的目录结构

似不似很凌乱，所以为了后续能够愉快滴进行开发，我们先来介绍下各个文件和目录的作用。

整体目录结构详细说明

由上至下依次介绍

• node_modules
  存放前端node模块类库的地方，执行npm install命令以后系统自动生成

• platforms
  包含Android和iOS打包的项目文件，执行cordova命令以后系统自动添加，通常后期也不需要我们修改

• resources
  项目的icon和splash资源文件目录

• src
  项目真正的源代码目录，一会儿细说

• www
  项目的前端编译后文件输出目录，直接拷贝该目录到服务器就可以部署前端了，非常方便

• config.xml
  客户端打包配置文件，Android和iOS项目打包的时候会依照该配置文件内的内容进行配置，所以一般客户端的问题通过修改该配置文件就可以解决。主要内容如下图：

客户端打包配置文件

其中widget层的id=“”属性为项目的包名，version="1.0.4"为版本号，xxxxxx为app的名字，再往下依次有全局配置，Android和iOS的个性化配置，以及JS插件的配置。

• package.json
  该文件内主要配置项目依赖的JS类库和cordova插件，如有更新，则需修改该文件，然后执行npm install命令，否则不会生效。

src目录详细说明

src目录结构

如上图为src目录的整体结构

• app
  项目的系统级目录，系统相关代码都在该目录

• assets
  存放图片等资源文件的目录，前端使用到的图片和视频等等都可以放在该目录

• components
  存放自定义组件代码的目录，没有则为空

• modules
  存放功能模块的代码的目录

• pages
  存放功能模块代码的目录，和modules类似

• theme
  存放公共样式文件的目录，包括系统级和自定义的样式文件

• index.html
  程序的入口文件，因为我们是webapp嘛，所有的web入口毕竟都是inde.html，哈哈，潜规则，该文件基本也不需要自己做改动。