Skip to content
No description, website, or topics provided.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
demo
img
lib
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

UI-BOY

主要目的是为了减少UI重构页面时的手工工作量降低设计工具和页面的切换频率

尽可能的实现在设计工具中只需要进行切图复制样式操作。

安装

npm install ui-boy

安装完成之后目录结构如下:

普通项目

  • HTML页面按照对应的目录引入相关文件;
<link rel="stylesheet" href="./node_modules/ui-boy/css/debug.css">
<script type="text/javascript" src="./node_modules/ui-boy/lib/tinycolor.js"></script>
<script type="text/javascript" src="./node_modules/ui-boy/lib/opencv.wasm.js"></script>
<script type="text/javascript" src="./node_modules/html2canvas/dist/html2canvas.min.js"></script>
<script type="text/javascript" src="./node_modules/ui-boy/index.js"></script>
  • 初始化
<script>
    window.onload = function(){
        new UIBoy({
            pageImageSrc:'./page.png'//原始设计稿图片路径
        });
    }
</script>

Vue 项目

假设该 Vue 项目使用 Vue-cli2 构建,那么需要对main.jsApp.vue以及package.json等文件进行一定的修改;

  • main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

/* ui-boy */
import UI-Boy from 'ui-boy'
new UIBoy({
  pageImageSrc: '/static/page.jpg' // 原始设计稿图片路径
})

引入组件代码并进行初始化,原始设计稿图片建议放在static目录中。

  • App.vue
<style>
@import '../node_modules/ui-boy/css/debug.css';
</style>

引入组件样式;

  • package.json
"scripts": {
    "dev": "node --max_old_space_size=4096 node_modules/.bin/webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node --max_old_space_size=4096 build/build.js"
},

因为opencvjs文件有10M,为了保证构建打包时内存不溢出,需要增加nodejs的内存限制。

更多

UI-BOY 保护眼睛 & 提升质量 & 提高效率

You can’t perform that action at this time.