最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于vue和elementUI封装的框架，集成 数据存储localforage、字体图标库font-awesome、css拓展语言scss、网络请求axios等模块，为了让业务开发更专注于数据驱动。项目源码地址：https://gitee.com/g2333/data_…使用场景1. 环境　　框架基于vue2.0开发，故开发环境也需要nodejs和vue-cli。2. 拓展和维护　　为使框架本身易拓展和维护，项目采用vue-cli封装，在开发和使用过程都不打包，保持程序的可读性，同时也方便在引用该模块时可简单的修改配置文件和源码。3. 便捷使用　　在一个全新的vue-cli初始化项目中，　　安装模块(在vue项目路径下npm i modulecomponents)，　　引用模块(在vue项目的main.js中添加import ‘modulecomponents/index.js’)　　测试使用(比如使用框架暴露的方法dataTool.alert(‘测试成功’))项目配置1. 依赖模块　　框架本身依赖有如下模块：　　elementUI 框架的主力，用于组件封装和方法的调用、　　localforage 数据存储，用于存储前端的大量数据、　　font-awesome 字体图标库、　　scss css拓展语言、　　axios 网络请求2. 设置项目入口　　修改package.json文件，添加main字段，指向项目入口(“main”: “mc/index.js”)，修改private字段，设置为开源(“private”: false)3. 项目初始化　　为了让框架方便引用，故在初始化文件index.js(框架项目开发过程使用indexdsForDev.js)，自动引入依赖和全局变量的挂载4. 文件提交　　设置项目.gitignore文件忽略node_modules避免在协同开发时因为环境不一致导致的webpack报错　　设置项目.npmignore文件忽略发布时非必要的文件，减少模块的体积封装的模块1. 组件　　组件基于elementUI封装，项目中封装的组件为避免命名冲突，都以mc-为前缀开头。　　　计划封装的组件有如下：　　表格mc-table、　　表单mc-form、　　树列表mc-tree、　　对话框mc-dialog、　　上下文菜单mc-contentmenu、　　按钮组mc-btns、　　流图mc-flow、　　下拉选框mc-select、　　附件上传mc-upload//在界面上显示一个表单<mc-form :object=“form”></mc-form>//表单对象，描述表单的结构和数据form: new mc.Form({ structure: [{ label: ‘测试’, name: ’test’, }], data: { test: ‘hello world’, }})　　除框架封装的组件外，依旧支持使用elementUI组件2. 全局方法　　为了方便开发，较为常用的方法被挂载在全局变量dataTool的属性中，比如　　请求方法：ajax请求httpReq、文件导出exportFile、文件上传uploadFile；　　提示类方法：警告弹框alert、边角提示notify、确认输入框confirm、锁屏加载loading等；　　调用组件类方法：打开弹窗openDialog、关闭弹窗closeDialog、打开上下文菜单openContextmenu、关闭上下文菜单closeContextmenu等；　　数据处理：对象类型的克隆和过滤objClone、时间格式的转化formatTime、cookie的添加setCookie等；　　原型链上的方法：获取表格新增的一行数据Array.newTableRow、数组元素位置交换Array.swap等；　　事件方法：注册事件addEvent、触发事件emitEvent、取消事件cancelEvent等；//打开上下文菜单，点击导出文件，将请求的内容导出成flow.json文件dataTool.openContextmenu(event,[{ text: ‘导出文件’, icon: ‘fa fa-download’, color: ‘blue’, click: ()=>{ const reqObj = {url:‘http://rap2api.taobao.org/app/mock/22119/FUNC=getFlow’, params: {}, type:‘mock’}; dataTool.httpReq(reqObj).then(res=>{ dataTool.exportFile({fileName: ‘flow.json’,data: JSON.stringify(res.CONTENT)}); }); }}])3. 配置文件　　封装的组件各有一份默认配置文件，方便全局调整组件的参数。　　封装的组件既支持组件类的默认参数修改，也兼容修改单个实例和继承组件类export default {　//表单类的配置文件 btns: [], //表单底部栏按钮 topBtns: [], //表单顶部栏按钮 hiddenRows: [], //隐藏的行 topBtnStyle: ‘’, bottomBtnStyle: ’text-align:right’, dialogEdit: false, //是否开启普通字符串类型的弹窗编辑功能 showRules: true, //是否显示表单规则验证 style: “margin: 10px;”, inline: false, labelWidth: “50px”, labelPosition: “right”, size: “small”, autoComplete: ‘on’, spellcheck: false, readOnly: false, extBtnIcon: ’el-icon-more’, textArea: { size: { minRows: 1, maxRows: 10}, resize: ’none’, }, tag: { input: ‘’, type: ‘warning’, closeTransition: false, appendWord: ’ + New Tag’, }, inputStyle: ‘width:100%’, dataType: { //采用小写，减少枚举数量 bool: [‘bool’,‘boolean’,‘switch’], checkboxGroup: [‘checkboxgroup’,‘checkbox’], radio: [‘radio’], select: [‘singleenum’,‘multiselect’,‘multienum’], time: [’time’], date: [‘date’,‘datetime’,‘datetimerange’,‘daterange’], button: [‘button’,‘btn’], tag: [’tags’,’tag’], input: [’’,‘input’,‘string’,’text’,’textarea’,’number’,‘float’,‘password’,‘double’,‘int’,‘integer’,’long’,‘search’,’extinput’], component: [‘mc-table’], },}开发记录1. 项目结构　　整体项目的规划整理在一个xmind文件中，方便记录开发进度和了解项目的整体大纲，这是图片版 http://qpic.cn/dDPbFwEeD (请在复制粘贴到浏览器的地址栏中访问)2. 使用文档　　为了记录开发进度和形成规范，项目开发的使用说明和修改会记录在石墨文档https://shimo.im/sheet/K8QPjP…3. 版本控制　　使用git作为版本控制，项目的源码托管在码云上https://gitee.com/g2333/data_…　　既方便协同开发，也方便代码版本控制框架更新1. 项目更新　　修改后的源码在测试成功后，修改package.json中的版本号，将代码推送到码云上，然后通过npm发布新版本2. 模块更新　　通过npm update modulecomponents指令更新模块，即可使用最新版功能