最近做一个教育类的H5项目开发，有个UI界面是关于兴趣爱好选择，由于不希望用绝对定位将标签的数量和位置固定，故根据一些简单的计算封装了随着标签数量增减的动态定位，然后就有了这个生成器。遗憾的是，通常这种UI只是移动端使用，而移动端如今多用rem进行布局，但该生成器采用的是px作为单位，仍需要自己修改单位换算问题。

生成器的界面如图所示：

1.png 2.png

• 源码地址：https://github.com/alex1504/circle-tag-generator
• 预览地址：http://www.huzerui.com/circle-tag-generator/dist/

说明：

1.基于Yeoman的webapp-generator构建
2.bower.json依赖：

"dependencies": {
    "vue": "^2.4.4",
    "jquery": "^3.2.1",
    "materialize": "^0.100.2",
    "spectrum": "^1.8.0"
  }

3.package.json开发依赖

 "devDependencies": {
    "async": "^2.5.0",
    "babel-core": "^6.4.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-register": "^6.5.2",
    "browser-sync": "^2.2.1",
    "cheerio": "^1.0.0-rc.2",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.1",
    "gulp-babel": "^6.1.1",
    "gulp-cache": "^0.4.2",
    "gulp-cssnano": "^2.0.0",
    "gulp-eslint": "^3.0.0",
    "gulp-filter": "^4.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.0.1",
    "gulp-load-plugins": "^1.2.4",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.0.0",
    "gulp-size": "^2.1.0",
    "gulp-sourcemaps": "^2.2.0",
    "gulp-uglify": "^2.0.0",
    "gulp-useref": "^3.0.0",
    "gulp.spritesmith": "^6.5.1",
    "http-proxy-middleware": "^0.17.4",
    "main-bower-files": "^2.5.0",
    "merge-stream": "^1.0.1",
    "node-sass": "^4.5.3",
    "run-sequence": "^1.2.2",
    "vinyl-buffer": "^1.0.0",
    "wiredep": "^4.0.0"
  }