pft-ui-component
v1.2.11
Published
./src/Component/下的每个目录对应一个组件,可以往里面添加更多组件
Downloads
68
Readme
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