標籤UI生成器 生成器的界面如圖所示： 說明：

最近做一個教育類的H5項目開發，有個UI界面是關於興趣愛好選擇，由於不希望用絕對定位將標籤的數量和位置固定，故根據一些簡單的計算封裝了隨着標籤數量增減的動態定位，然後就有了這個生成器。遺憾的是，通常這種UI只是移動端使用，而移動端如今多用rem進行佈局，但該生成器採用的是px作爲單位，仍需要自己修改單位換算問題。

生成器的界面如圖所示：

• 源碼地址：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"
  }