最近做一个教育类的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"
}
