CUT-BOY

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

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

安装

npm install cut-boy

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

普通项目

• 在HTML页面按照对应的目录引入相关文件；

<link rel="stylesheet" href="./node_modules/cut-boy/css/debug.css">
<script type="text/javascript" src="./node_modules/cut-boy/lib/tinycolor.js"></script>
<script type="text/javascript" src="./node_modules/cut-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/cut-boy/index.js"></script>

• 初始化

<script>
    window.onload = function(){
        new CutBoy({
            pageImageSrc:'./page.png'//原始设计稿图片路径
        });
    }
</script>

Vue项目

假设该Vue项目使用Vue-cli2构建，那么需要对main.js、App.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/>'
})

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

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

• App.vue

<style>
@import '../node_modules/cut-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"
},

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

更多

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