1.1.3 • Published 6 years ago
ui-boy v1.1.3
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.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/>'
})
/* 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"
},
因为opencv
的js
文件有10M
,为了保证构建打包时内存不溢出,需要增加nodejs
的内存限制。
更多
1.1.3
6 years ago