BUI buijs cli工具

2020-08-12 14:13 更新

一、簡(jiǎn)介

buijsBUI Webapp交互框架 的npm命令工具(專注webapp快速開(kāi)發(fā)), 用于快速生成指定平臺(tái)與模板必須的工程文件. 需要先安裝 node環(huán)境 才能使用npm命令.

通過(guò)命令行構(gòu)建的工程,每次都會(huì)自動(dòng)獲取最新的BUI模板工程, 并且可以指定模板及平臺(tái). BUI模板圖片預(yù)覽

二、安裝buijs命令行工具

windows:

npm install -g buijs

mac:

sudo npm install -g buijs

三、初始化工程目錄:

buijs 創(chuàng)建工程預(yù)覽

創(chuàng)建默認(rèn)Webapp工程 (demo 為工程名稱)

buijs create demo

默認(rèn)模板預(yù)覽 更多模板點(diǎn)擊這里 BUI模板圖片預(yù)覽

默認(rèn)模板

四、命令列表

命令行 描述
buijs -v 查看當(dāng)前工具的版本
buijs -h 命令幫助信息
buijs list 顯示可用的版本
buijs list-template 顯示可用的模板列表 BUI模板圖片預(yù)覽
buijs list-platform 顯示可用的平臺(tái)列表
buijs create <projectName> [version] 創(chuàng)建bui默認(rèn)工程
buijs create <projectName> [version] -t tab 創(chuàng)建bui tab在底部的模板工程,默認(rèn)平臺(tái) webapp
buijs create <projectName> [version] -t tab -p link 創(chuàng)建bui tab在底部的模板工程,更改平臺(tái)為 link

創(chuàng)建某個(gè)模板工程 ( main-tab 為模板名稱)

可以先查看有什么模板 buijs list-template, BUI模板圖片預(yù)覽



buijs create demo -t main-tab

效果預(yù)覽

效果預(yù)覽

注意:
1. 同一個(gè)工程可以多次創(chuàng)建模板;
模板名以 main-開(kāi)頭 會(huì)覆蓋 main 模塊, 例如: 模板名 main-tab 預(yù)覽地址 index.html
模板名以 page-開(kāi)頭 會(huì)新增模塊, 例如: 模板名 page-sidebar 預(yù)覽地址 index.html#pages/sidebar/sidebar
2. 同一個(gè)工程只能創(chuàng)建一個(gè)平臺(tái), 多次創(chuàng)建會(huì)相互覆蓋;

創(chuàng)建指定平臺(tái)工程 ( dcloud 為平臺(tái)名稱 )

可以先查看有什么平臺(tái)選擇 buijs list-platform

注意:
1. 目前已經(jīng)支持以下打包平臺(tái) cordova,bingotouch,link,dcloud,apicloud,appcan,微信 等;
2. 不同平臺(tái)對(duì)應(yīng)的文件會(huì)有些許不同, 綁定原生后退的方法也不同, 不指定平臺(tái)時(shí), 默認(rèn)是webapp平臺(tái), 可以在微信及webkit瀏覽器內(nèi)核預(yù)覽.

buijs create demo -p dcloud

創(chuàng)建某個(gè)平臺(tái)下的某個(gè)模板工程

buijs create demo -t sidebar -p dcloud

創(chuàng)建指定版本工程

可以先查看有什么版本 buijs list

buijs create demo v1.0

五、目錄說(shuō)明:

單頁(yè)應(yīng)用包文件夾說(shuō)明:

路徑 描述
index.html 入口文件
index.js 入口的腳本
css/bui.css BUI庫(kù)的樣式文件
font/ 字體圖標(biāo)目錄
images/ 應(yīng)用圖片目錄
js/zepto.js bui的依賴庫(kù)
js/plugins/fastclick.js 移動(dòng)端快速點(diǎn)擊的插件
js/bui.js BUI交互控件庫(kù)
pages/ 模塊目錄
pages/main 默認(rèn) main 模塊
pages/main/main.html 默認(rèn) main 模塊模板
pages/main/main.js 默認(rèn) main 模塊定義腳本
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)