LEGO

版本 1.0.0

欢迎使用 LEGO 视觉组件库！这是一款用于移动端的 H5 组件库，主要包括常用组件，以及条件校验等功能。组件库仅限于表现层的功能，需要结合 GUM 框架一同使用。

注：LEGO UI 的组件封装技术基于 Vue.js

在线文档

https://wangweiqi.com/lego/1.0.0/docs/

开始使用

环境搭建

1. nginx

# 安装 Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# 安装 nginx
brew install nginx

2. NodeJS

• 访问 NodeJS 官网 https://nodejs.org/en/download/releases
• 找到 "node-v4.8.0.pkg" 安装包, 下载并安装

3. Grunt

# 安装 grunt 和 grunt cli 提示框
npm install grunt --save-dev
npm install -g grunt-cli

# 安装依整的包
npm install
npm install vueify --save-dev
npm install --save-dev grunt-vueify

# 安装 Sass
sudo npm install –save node-sass grunt-sass

编译

# 编译全部，包括：库文件、演示、使用文档等
grunt lego

# 只编译库文件
grunt release

# 只编译演示
grunt demo

# 只编译说明文档
node Createdocs.js 

项目说明

代码结构

• dist - 生成的 LEGO 库文件和样式文件，拷贝到对应项目的 assets 文件夹即可使用；
• docs - 生成的说明文档，使用 nginx 服务地址访问；
• src - 源文件，包括每个组件的实现和说明；
• webroot - 生成的演示网站；

如何使用

在 GUM 的处理器中，使用 renderVUE 方法来渲染页面即可。具体方法，请参考说明文档 https://0x5.me/N9VL 。

var html = tpl(data);

/**
 * 使用 VUE 来渲染页面的方法
 *
 * @param {String} html - 页面内的 HTML 代码；
 * @param {Object} data - 用于渲染页面的数据对象；
 * @param {String} title - 页面标题；
 * @param {Function} callback - 渲染完成之后的回调函数；
 */
this.renderVUE(html, data, title, function (app) {
    // 页面渲染完成后，注册事件
});