Yeoman generator for QMUI Web
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
generators
test
.editorconfig
.gitattributes
.gitignore
.travis.yml
LICENSE
README.md
gulpfile.js
package.json

README.md

generator-qmui NPM version

A Yeoman generator for QMUI Web

Dependency Status 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

效果预览

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