美文网首页Ionic2开发
Ionic2实战-框架和模块目录结构说明和设计

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

作者: 逃离火星 | 来源:发表于2017-08-02 23:26 被阅读258次

    前言

    当我们初始化完项目以后是不是就可以愉快的进行开发了?好的,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"为版本号,<name>xxx</name>xxx为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,哈哈,潜规则,该文件基本也不需要自己做改动。

    相关文章

      网友评论

      本文标题: Ionic2实战-框架和模块目录结构说明和设计

      本文链接:https://www.haomeiwen.com/subject/emxulxtx.html