Home

Awesome

generator-qmui NPM version

A Yeoman generator for QMUI Web

QMUI Team Name License

Installation

First, install Yeoman and generator-qmui using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-qmui

Then generate your new project on your target directory:

yo qmui

Preview

<img src="https://raw.githubusercontent.com/QMUI/qmuidemo_web/master/public/style/images/independent/Generator.gif" width="628" height="442" alt="效果预览" />

Generators

Available generators:

App

Sets up a new QMUI Web project on your target directory, generating all the directories and files you need to get started, and guide you to configure the project.

Example:

yo qmui

Html

Generates a HTML file containing the basic code.

Example:

yo qmui:html fileName

Produces fileName.html:

<!DOCTYPE html>
<html lang="zh-cmn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title>Page Title</title>
</head>
<body>

</body>
</html>

For generator that outputs HTML template, the —-include option will output template that uses QMUI Include Syntax rather than native HTML.

Example:

yo qmui:html fileName --include

Produces fileName.html

@@include('./_header.html', {
  "title": "Page Title"
})

@@include('./_footer.html')

Scss

Generates a scss file that conforms to the QMUI format.

Example:

yo qmui:scss fileName

Produces fileName.scss:

@charset "UTF-8";
/**
 * fileName.scss
 * @author Your OS Username
 * @date Today
 *
 */

Css

Generates a style file that conforms to the QMUI format.

Example:

yo qmui:css fileName

Produces fileName.css:

/**
 * fileName.css
 * @author Your OS Username
 * @date Today
 *
 */

Custom Task

Generates a JavaScript file that fits in the QMUI workflow in order to implement custom tasks.

Example:

yo qmui:task fileName

Produces fileName.js:

// Task Name
module.exports = function (gulp, common) {

    var taskName = 'Task Name';

    gulp.task(taskName, function (done) {

        // Custom task logic code
        common.util.log('execute succeed');

        done();
    });

    // Task Description (For gulp list)
    common.tasks[taskName] = {
        description: 'Custom Task'
    };
};

License

MIT © QMUI Team