应用介绍

百搭——组件模板一体化构建工具

当前为 beta 版本，正在不断迭代中，尽请期待正式版，喜欢请分享给你的朋友吧。

在线体验

简介

百搭是一个基于BUI制作的H5 在线开发工具，可本地开发或，独立部署。项目可一键集成组件，模板，围绕BUI的生态资源（组件，模板，案例）整合，简化了开发构建流程，集中管理项目，统一开发环境，减少工程依赖安装等问题，有效提升开发效率。

优势：
模板共享，一键集成；
快速构建，无需等待；
开箱即用，无需配置；
按需加载，高效复用；
一次开发，平台适配；
流畅交互，原生体验；

特点

• 工程模板可预览构建，开箱即用
• 资源共享（模板,组件,案例），一键下载
• 统一开发环境，无需安装依赖
• 常用控件代码库，所见即所得
• 代码开发提示，减少参数记忆
• 工程，组件在线预览
• 组件化开发
• Monaco代码编辑(Vscode)

视频演示

视频演示

截图预览

架构图

登录

欢迎页

新建项目

工程编辑预览

模板列表

模板详情

组件

安装使用

建议环境为 node 14.20 以上

注意：如果版本baida -v 低于 0.4.1 请执行 npm uninstall baida -g 卸载之前版本，重新安装

国内使用 cnpm 安装速度更快。如果windows安装报错，也可以试试 cnpm 安装

Windows 安装

需要先使用右键，管理员打开终端，运行以下命令，

# 全局安装
npm install baida -g --force

# 服务
baida start 

Mac 安装

mac 如果安装报错，需要提升NPM权限 sudo npm -g config set user root，

# 提升npm安装权限
sudo npm -g config set user root

# 全局安装
sudo npm install baida -g

# 服务
sudo baida start 

打开网址： http://localhost:9000

百搭项目源码如何下载导出：

1. 进入项目配置--> 导出项目源码--> 生成一个项目源码的zip 包 --> 右键下载

2. 本地解压到任意一个英文路径（保存才能实时更新预览）下的目录，重新安装依赖即可开发。

使用反馈

使用反馈

常见报错问题

报错排查，由于node环境不一样，安装过程可能存在报错，目前已知的报错有：

1. better-sqlite3 if noe defined npm_config_node_gyp
   先全局安装 npm install node-gyp -g

2. gyp ERR! find VS msvs_version not set from command line or npm config ... Error: Could not find any Visual Studio installation to use
   需要先安装并配置

# 安装 python 和 vs studio 环境 默认2017
npm install --global windows-build-tools

# 配置
npm config set msvs_version 2017

3. 无法运行，node Error: Could not locate the bindings file. Tried

检查第1步，第2步，问题可能还是在 better-sqlite3 无法正确编译

4. Powershell 终端如果不能执行 baid start ，则需要修改策略, 或者使用Node的终端（右键管理员打开）

修改策略，再执行安装
set-ExecutionPolicy RemoteSigned

5. 安装源为私有源，会导致一些依赖不能正确安装

# 查看安装源
npm config ls

# 如果不是 https://registry.npmjs.org ，重新设置
npm config set 'https://registry.npmjs.org'

或者使用 cnpm 安装

6. 端口占用

按以下命令先终止掉端口，也可以使用新的端口，新端口之前的缓存都不存在。 baida start 8888

windows:

# 查找9000端口占用的pid名，如53645，只是示例，不同环境不一样的pid
netstat -aon|findstr 9000

# 结束掉pid：53645 进程 
taskkill -f -pid 53645

mac:

# 查找9000端口占用的pid名，如53645，只是示例，不同环境不一样的pid
sudo lsof -i tcp:9000

# 结束掉pid：53645 进程 
sudo kill -9 53645

鸣谢

• BUI
• jQuery
• jsTree
• Monco-Editor
• Node
• express
• better-sqlite3
• babel
• browserify
• browser-sync
• gulp
  ...