BUI-Template

更新日志

重要更新,模板更新为1.5.0, 设计稿升级为750规范, 如果你的版本目前是1.4.7, 创建模板时,请指定对应版本, 如果你的模板还是旧版, 请尝试清空模板缓存.

# 更新buijs 0.5.1 才有清除缓存功能
$ npm update -g buijs
# 清除缓存
$ buijs clear

默认的npm工程文件为 node8.x, 如果下载的是 node10以上版本, 需要替换工程, 并且使用 cnpm 安装.

简介

这个模板工程文件是为了配合 buijs 命令行工具而创建. 通过安装该工具,可以快速创建或增加模板, 具体请查看 buijs使用说明 .

通过命令行构建的工程,每次都会自动获取最新的BUI模板工程, 并且可以指定模板名称及指定平台. BUI官网还有更多模板, 需要手动下载 进入官网预览模板.

创建某个模板工程

可以先查看有什么模板 buijs list-template, BUI模板图片预览

# 进入工程目录
$ cd demo
# 默认创建webapp工程模板
$ buijs create -t main-tab

main-tab 为模板名称

注意:

1. 同一个工程可以多次创建模板; 模板名以 main-开头 会覆盖 main 模块, 例如: 模板名 main-tab 预览地址 index.html; 模板名以 page-开头 会新增页面, 例如: 模板名 page-login 预览地址 index.html#pages/login/login; 1.6.x 新增 模板名以 case-开头 会覆盖工程, 例如: 模板名 case-login 预览地址 index.html;
2. main-开头的模板会覆盖main页面, page-开头的模板是新增页面, case-开头是一个完整的小案例;
3. 同一个工程只能创建一个平台, 多次创建会相互覆盖;

更多 buijs使用说明 ;

模板预览

通用及常用的案例类

• case-login: 全局登录权限处理
• case-tablogin: tab局部登录处理
• case-163: 163新闻案例

案例: case-login 预览: index.html

案例: case-tablogin 预览: index.html

案例: case-163 预览: index.html

覆盖main模块的模板

• main-tab: tab底部动态加载
• main-tab-head: tab顶部动态加载Component
• main-tab-foot: tab底部动态加载Component

模板: main-tab 预览: index.html

模板: main-tab-head 预览: index.html

模板: main-tab-foot 预览: index.html

新增页面模板

模板: page-addressbook 预览: index.html#pages/addressbook/addressbook	模板: page-blog 预览: index.html#pages/blog/blog	模板: page-icon 预览: index.html#pages/icon/icon
模板: page-article 预览: index.html#pages/article/article	模板: page-article-list 预览: index.html#pages/article-list/article-list	模板: page-comment 预览: index.html#pages/comment/comment
模板: page-list 预览: index.html#pages/list/list	模板: page-search 预览: index.html#pages/search/search	模板: page-history 预览: index.html#pages/history/history
模板: page-login 预览: index.html#pages/login/login	模板: page-register 预览: index.html#pages/register/register	模板: page-form 预览: index.html#pages/form/form
模板: page-chat 预览: index.html#pages/chat/chat	模板: page-panel 预览: index.html#pages/panel/panel	模板: page-personal 预览: index.html#pages/personal/personal
模板: page-sidebar 预览: index.html#pages/sidebar/sidebar	模板: page-photo 预览: index.html#pages/photo/photo	模板: page-msg 预览: index.html#pages/msg/msg