baida v0.8.6

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

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

在线体验地址：http://easybui.com/baida

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

简介

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

特点

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

视频演示

视频演示

截图预览

一图看懂百搭

首页

新建项目

项目预览

组件

模板

安装使用

一键复制安装

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

npx baida@latest start

国内使用 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

工程预览地址：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 需要先安装并配置

# 安装 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

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

自定义环境变量说明

使用编辑器模式创建项目

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 根据以上参数创建项目

使用反馈

使用反馈

鸣谢

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