pft-ui-component

quick start

在./src目录下新建index.js文件，用来做为你开发环境的入口文件

./src/Component/下的每个目录对应一个组件，可以往里面添加更多组件

要在浏览器里引入你写的组件代时，只需要在./src/index.js里requrie你的组件即可，如：

// ./src/index.js

var Message = require("./Component/Message);  //引入组件

console.log(Message);

npm install

安装所需依赖模块

npm start

进入开发环境，入口文件为./src/index.js，然后浏览器打开http://localhost:8000

npm run server

本地起一个server，用来ajax请求

npm run example

查看组件库的所有示例，api调用等 浏览器打开http://localhost:9000

开发规范

一个组件对应一个目录，对应名即名目录名，命名规范跟我们assets项目有点不一样:

Message 推荐

MessageAjax 推荐

message 不推荐

messageAjax 不推荐

message_ajax 不推荐

messageajax 不推荐

Mb_Model 推荐 Mb_开头的，表示是一个手机端组件

目录说明

./buildTask 存放构建脚本

./dist 存放每个组件各自找包后的.all文件

当你的组件开完并自己测试通过后，可以分享给团队成员使用了，

这时他人不是直接引用你组件的源码:require("./src/Component/Message")，

你需要将你的组件打包一份放在此目录下，如Message组件打包后会在./dist目录下

产生Message目录，里面只会有2个文件：message.all.css message.all.js，

外部只要require这两个文件即可，思考下为什么要这么做？

一个小tip:

A同学要在自己的业务代码里使用B同学写好的Message组件，他可以这样：

 var Message = require("pft-ui-component/src/Component/Message");  //=> 直接引用组件的源码，不会报错，但不要这么做 


 var Message = require("pft-ui-component/dist/Message");           //=> 直接引用组件打包后的代码，可以，但不推荐


 var Message = require("pft-ui-component/Message");                //=> 推荐，引用根目录下的Message.js，写法上更简洁，而且统一了外部的调用 


//根目录下的Message.js: ./Message.js
require("./dist/Message/message.all.css");
var Message = require("./dist/Message/message.all.js");

module.exports = Message;

如何打包组件请见下文

./example 所有组件的示例页面

./mask mock数据,要添加接口数据，在db.json里加即可

./src 所有组件的开发目录，存放源代码

如何打包组件

npm run dist -- component-name

如，要打包Message组件：npm run dist -- Message