1.1.3 • Published 6 years ago

ui-boy v1.1.3

Weekly downloads
1
License
ISC
Repository
github
Last release
6 years ago

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 保护眼睛 & 提升质量 & 提高效率