mini Snippet 2.0 (EpointFrameHelper)
mini Snippet 是一款 F9/F9X 框架前端开发辅助性工具, mini Snippet 1.0 发布已有一段时间,团队收集了使用过程中的问题,现发布 mini Snippet 2.0, 2.0 进行了功能增强和使用方便性的提升。
一、框架代码智能提示
提供 EUI 组件 html 属性自动完成、属性和属性值信息提示、属性文档链接;
提供 F9 框架模板代码片段;
提供 F9 框架源码代码智能提示功能,包括 miniUI 组件、epoint 框架工具类、Util 工具类、uitl.f9x.js 工具类、SrcBoot 等,通过嵌入编辑器右键菜单,保持提示文件同步更新。
提供 F9 框架 api 点对点文档提示,减少搜索查找时间。
提供 F9 框架常用 api 调用示例。
提供 F9x 框架 Util 工具类代码智能提示。
使用
html 自动完成、属性及属性默认值提示,点击提示链接跳转官方文档。
打开 html 文件,体验 F9 基本页面、基础布局、EUI 组件模板。
在 vs code 工作区右键 > EpointFrameHelper > 框架代码提示,点击后自动安装源码类型定义文件 @types/framehelper ,文件安装在项目根目录,项目根目录出现 node_modules/@types/framehelper
即安装成功。
打开 js 文件,输入框架 api 体验代码提示。
说明
F9 页面模板 snippet:
fuibasePage
: 基本页面
fuicontentPage
: contentPage布局(F9)
fuileftright
: 左右布局
fuilayout
: 框架布局器
fuiform
: 表单布局
fui-search
: 高级搜索布局
fuiaccordion
: 手风琴布局
fuimaster
: 导航模板
fuititleandtabs
标题和tab
fuidatagrid
: 表格组件
fuitreegrid
: 树状表格
fuitab
: tabs 组件
fuisplitter
: 分割器
fuitree
: 树
fuifiltertree
: 带输入框的树控件
fuitabstreeselect
: 多tab树列表选择控件
fuicombobox
: 下拉选择
fuitextboxlist
: 多选输入框
fuiautocomplete
: 下拉列表输入框 autocomplete
fuidatepicker
:` 日期选择输入框
fuidaterangepicker
: 日期范围选择输入框
fuicheckboxlist
: 复选框组
fuiradiobuttonlist
: 单选框组
fuicalendar
: 日历 Calendar
fuispinner
: 数值调节器
fuiwebuploader
: WebUploader 文件上传
fuipagertree
: 树形分页表格
fuipager
: 分页
fuiimageuploader
: 图片上传控件
fuitimespinner
: 时间调节器
fuirate
: 评分评星rate
fuiverifycode
: 验证码
fuijigsawverify
: 拼图验证码
fuidataexport
: 导出控件 DataExport
fuibuttonedit
: buttonedit
二、项目初始化和自动构建
F9 框架发布的前端代码是自动构建完的,产品和项目中也存在自动构建的需求,我们 EpointFrameHelper 集成了 gulp
工具,进行自动构建,功能如下:
对项目中的 js 资源进行压缩混淆。
对项目的 scss 资源进行编译、压缩。
使用
- 在 vs code 工作区右键 > EpointFrameHelper > 项目初始化,点击后自动打开终端执行
npm install
。
安装自动构建依赖
- 终端执行完所有 node_modules 下载后,再次点击 工作区右键 > EpointFrameHelper > 自动构建,点击后自动监听项目 pages 目录中的 js、css 资源。
js 文件混淆压缩:
说明
三、生成目录资源说明文档
开发完成后,提交项目后端人员整合前,需要提供前端目录资源说明文档。EpointFrameHelper 提供了自动输出前端工程目录结构说明 md 文档。
使用
在 vs code 工作区右键 > EpointFrameHelper > 生成资源目录说明,建议在 webapp/frame/pages/某项目
这一层目录下生成 readme.md
。
说明
问题反馈
使用过程有任何问题和建议请通过 issues 反馈,谢谢!issues