# 百搭——组件模板一体化构建工具，一键集成

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

**在线体验地址**：[http://easybui.com/baida](http://easybui.com/baida)

切换预览快捷键: Alt+b 刷新快捷键：Alt+r；
在线版手动刷新才能看到修改；
本地版实时刷新预览；

## 简介

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

## 特点

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

## 视频演示

<a href="https://www.bilibili.com/video/BV1JD4y1M7tx/?share_source=copy_web&vd_source=9b52301cb729274cdb406231f49f5388" target="_blank">视频演示</a>


## 截图预览

一图看懂百搭

![jiagou](https://www.easybui.com/uploads/20230101/44b313e8176b1b394f75a8885f3c3200.png)

首页

![welcome](https://www.easybui.com/uploads/20230101/74e5745b287d6b40ba4823ef4f36a71b.png)

新建项目

![newproject](https://www.easybui.com/uploads/20230101/25289470c5dd8a751c1becf7ba33ec30.png)

项目预览
![projectpreview](https://www.easybui.com/uploads/20230105/9946bf08a499e1e9d1c64ff55540c914.png)

组件
![components](https://www.easybui.com/uploads/20230105/5cc7c37fb5bc75fe4d810f985f7ed392.png)

模板
![template](https://www.easybui.com/uploads/20230105/c561ef7f29b6de08f77deddf4c868ca5.png)


## 安装使用


### 一键复制安装

建议优先使用这种方式尝试, node 环境 16.x 

```bash
npx baida@latest start
```

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

### Windows 安装

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

```bash

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

# 服务
baida start 

```

### Mac 安装

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

```bash

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

# 全局安装
sudo npm install baida -g

# 服务
sudo baida start 

```

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

工程预览地址：http://localhost:9001/username/projectname/src/index.html


### 常见报错问题

报错排查，由于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
需要先安装并配置

```bash
# 安装 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. 安装源为私有源，会导致一些依赖不能正确安装

```bash
# 查看安装源
npm config ls

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

npm config set 'https://registry.npmjs.org'

```

或者使用 `cnpm` 安装


6. 端口占用

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

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

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

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

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

7. windows 10 没有权限
报  ` EPERM: operation not permitted, mkdir 'C:` 这类的错误，部分windows10 在执行编译预览的时候会有这个问题，可以右键删除dist目录，再重新编译。

## 自定义环境变量说明

使用编辑器模式创建项目
```bash
cross-env NODE_ENV=editor USERNAME_ENV=easybui PROJECT_ENV=bui PLATFORM_ENV=webapp TEMPLATE_ENV=empty DEV_ENV=spa PORT_ENV=8000 WORKSPACE_ENV=/Users/yourname/Baida FROM_ENV=/Users/yourname/Baida/release/bui DB_ENV=baida-editor.db baida create
```

NODE_ENV 当前环境变量，有4个版本 production: 部署个人版，development：开发版，online: 多人在线版，不能实时更新， editor: 编辑器模式, 无需权限，一次编辑一个项目
USERNAME_ENV 用户名，自定义
PROJECT_ENV 项目名，自定义
PLATFORM_ENV 项目的平台版本 默认 webapp | link | bingotouch | cordova | weixinapp | dcloud | apicloud
TEMPLATE_ENV 项目模板 默认 empty | tab-foot | tab-head | tab-side | main-sidebar | main-login | main-form | main-list
DEV_ENV 项目的开发模式 默认 spa | mpa
PORT_ENV 项目的自定义端口，默认 9000 编辑器模式 默认 8000
WORKSPACE_ENV 工作空间自定义目录，存放版本，数据库，用户，项目等资料信息
FROM_ENV 构建来源，从这个目录复制构建项目信息，如果为空，会从远程获取最新版本进行解压
DB_ENV 数据库名称，默认 baida.db

baida create 根据以上参数创建项目


## 使用反馈

[使用反馈](https://www.easybui.com/d/baidamessage/post.html)

## 鸣谢

- [BUI](https://easybui.com)
- [jQuery](https://jquery.com/)
- [jsTree](https://www.jstree.com/)
- [Monco-Editor](https://microsoft.github.io/monaco-editor/)
- [Node](https://nodejs.org/)
- express
- better-sqlite3
- babel
- browserify
- browser-sync
- gulp
...