#fis-didi脚手架

使用fis-didi可以快速开始完成项目开发。

创建一个新项目

didi init project

在项目里默认有以下文件

├── component.json          // 目前主要作用记录项目使用了哪些模块（由此命令安装：didi install <namespace>/<component name>）
├── fis-conf.js             // fis-didi的配置文件
├── css			            // 项目的基础css文件
│   └── lib.css             // 基础HTML文件
├── img                     // 基础图片文件
│   └── didi.png
├── lib                     // 基础JS文件，主意里面文件都是 非模块化文件
│   ├── lib.js              // 负责将其他文件内嵌进来
│   ├── mod.js              // 模块加载器，配合fis-didi的发布来实现模块化
│   └── zepto.js            // 号称移动端的jquery
├── page                    // 页面根目录
│   └── pop                 // 示例页面文件夹
│       ├── animate.css     // 示例页面分出来的单个CSS
│       ├── main.css        // 示例页面的入口CSS
│       ├── main.html       // 示例页面的入口HTML
│       └── main.js
├── test                    // 模拟数据目录，特别注意的是其内部的结构和page文件夹一致
│   └── pop                 // 示例页面pop的模拟数据文件夹
│       └── main.php        // 示例页面pop的模拟数据
└── components              // 项目工程模块的跟目录
    ├── first               // first模块文件夹
    │   ├── first.css       // first模块的入口css，文件名须与模块名(first)相同 
    │   ├── first.html      // first模块的入口HTML，文件名须与模块名(first)相同
    │   └── first.js        // first模块的入口JS，文件名须与模块名(first)相同，可通过 require('first') 来获取模块
    ├── second
    │   ├── second.css
    │   ├── second.html
    │   └── second.js
    └── third
        ├── third.css
        ├── third.html
        └── third.js

创建一个新页面

cd <project_root>

didi init page

<project_root>/page/<page_name>文件夹下被创建，里面包含必要的几个文件。 <project_root>/test/<page_name>/main.php文件被创建，用来模拟php数据。

创建一个新模块

didi init component

<project_root>/comonents/<component_name>/文件夹下被创建，里面包含必要的几个文件。 其中<project_root>/comonents/<component_name>/<component_name>.js， 可以通过一下语法获取

require('<project_name>');

注：

• <project_root>：代表项目根目录
• <page_root>：代表项目名称
• <component_name>：代表模块名称