Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5

    ···
    ·
    |-- client				// 原 src 目录，改成 client 用作前端项目目录
    |-- server				// 新增 server 用于服务端项目目录
    |-- engine-template		// 新增 engine-template 用于页面模板库目录
    |-- docs				// 新增 docs 预留编写项目文档目录
    ·
    ···

        module.exports = {
          pages: {
            index: {
              entry: "client/main.js"        
            }
          }
        }

    // 扩展 webpack 配置
    chainWebpack: config => {
    	config.module
    	.rule('js')
    	.include.add(/engine-template/).end()
    	.include.add(/client/).end()
    	.use('babel')
    	.loader('babel-loader')
    	.tap(options => {
    	// 修改它的选项...
    	return options
    	})
    }

    |-- client					--------前端项目界面代码
        |--common					--------前端界面对应静态资源
        |--components				--------组件
        |--config					--------配置文件
        |--eventBus					--------eventBus
        |--filter					--------过滤器
        |--mixins					--------混入
        |--pages					--------页面
        |--router					--------路由配置
        |--store					--------vuex状态管理
        |--service					--------axios封装
        |--App.vue					--------App
        |--main.js					--------入口文件
        |--permission.js			--------权限控制
    |-- server					--------服务器端项目代码
        |--confog					--------数据库链接相关
        |--middleware				--------中间件
        |--models					--------Schema和Model
        |--routes					--------路由
        |--views					--------ejs页面模板
        |--public					--------静态资源
        |--utils					--------工具方法
        |--app.js					--------服务端入口
    |-- common					--------前后端公用代码模块（如加解密）
    |-- engine-template			--------页面模板引擎，使用webpack打包成js提供页面引用
    |-- docs					--------预留编写项目文档目录
    |-- config.json				--------配置文件

    {
    	title: '', // 标题
    	description: '', //描述
    	coverImage: '', // 封面
    	auther: '', // 作者
    	script: '', // 页面插入脚本
    	width: 375, // 高
    	height: 644, // 宽
    	pages: [], // 多页页面
    	shareConfig: {}, // 微信分享配置
    	pageMode: 0, // 渲染模式，用于扩展多种模式渲染，翻页h5/长页/PC页面等等
    }

    {
    	name: '',
    	elements: [], // 页面元素
    	commonStyle: {
    		backgroundColor: '',
    		backgroundImage: '',
    		backgroundSize: 'cover'
    	},
    	config: {}
    }

    {
    	elName: '', // 组件名
    	animations: [], // 图层的动画,可以支持多个动画
    	commonStyle: {}, // 公共样式，默认样式
    	events: [], // 事件配置数据，每个图层可以添加多个事件
    	propsValue: {}, // 属性参数
    	value: '', // 绑定值
    	valueType: 'String', // 值类型
    	isForm: false // 是否是表单控件，用于表单提交时获取表单数据
    }

    /**
     * 组件库入口
     * */
    import Text from './text'
    // 所有组件列表
    const components = [
    	Text
    ]
    // 定义 install 方法，接收 Vue 作为参数
    const install = function (Vue) {
    	// 判断是否安装，安装过就不继续往下执行
    	if (install.installed) return
    	install.installed = true
    	// 遍历注册所有组件
    	components.map(component => Vue.component(component.name, component))
    }
    
    // 检测到 Vue 才执行，毕竟我们是基于 Vue 的
    if (typeof window !== 'undefined' && window.Vue) {
    	install(window.Vue)
    }
    
    export default {
    	install,
    	// 所有组件，必须具有 install，才能使用 Vue.use()
    	Text
    }

    |-- text                --------text组件
        |--src              --------资源
        	|--index.vue    --------组件
        |--index.js         --------入口

    // 为组件提供 install 方法，供组件对外按需引入
    import Component from './src/index'
    Component.install = Vue => {
    	Vue.component(Component.name, Component)
    }
    export default Component

    <!--text.vue-->
    <template>
      <div class="qk-text">
        {{text}}
      </div>
    </template>
    
    <script>
    	export default {
    		name: 'QkText', // 这个名字很重要，它就是未来的标签名<qk-text></qk-text>
    		props: {
    			text: {
    				type: String,
    				default: '这是一段文字'
          		}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    </style>

    // 引入组件库
    import QKUI from 'client/plugins/index'
    // 注册组件库
    Vue.use(QKUI)
    
    // 使用：
    <qk-text text="这是一段文字"></qk-text>

    export default [
    	{
    		title: '基础组件',
    		components: [
    			{
    				elName: 'qk-text', // 组件名，与组件库名称一致
    				title: '文字',
    				icon: 'iconfont iconwenben',
    				// 给每个组件配置默认显示样式
    				defaultStyle: {
    					height: 40
    				}
    			}
    		]
    	},
    	{
    		title: '表单组件',
    		components: []
    	},
    	{
    		title: '功能组件',
    		components: []
    	},
    	{
    		title: '业务组件',
    		components: []
    	}
    ]

    /**
     * 动画方法， 将动画css加入到元素上，返回promise提供执行后续操作（将动画重置）
     * @param $el 当前被执行动画的元素
     * @param animationList 动画列表
     * @param isDebugger 动画列表
     * @returns {Promise<void>}
     */
    export default async function runAnimation($el, animationList = [], isDebug , callback){
    	let playFn = function (animation) {
    		return new Promise(resolve => {
    			$el.style.animationName =  animation.type
    			$el.style.animationDuration =  `${animation.duration}s`
    			// 如果是循环播放就将循环次数置为1，这样有效避免编辑时因为预览循环播放组件播放动画无法触发animationend来暂停组件动画
    			$el.style.animationIterationCount =  animation.infinite ? (isDebug ? 1 : 'infinite') : animation.interationCount
    			$el.style.animationDelay =  `${animation.delay}s`
    			$el.style.animationFillMode =  'both'let resolveFn = function(){
    				$el.removeEventListener('animationend', resolveFn, false);
    				$el.addEventListener('animationcancel', resolveFn, false);
    				resolve()
    			}
    			$el.addEventListener('animationend', resolveFn, false)
    			$el.addEventListener('animationcancel', resolveFn, false);
    		})
    	}
    	for(let i = 0, len = animationList.length; i < len; i++){
    		await playFn(animationList[i])
    	}
    	if(callback){
    		callback()
    	}
    }

    let cssText = this.$el.style.cssText;
    runAnimations(this.$el, animations, true, () => {
    	this.$el.style.cssText = cssText
    })

    cnpm install psd --save

    var PSD = require('psd');
    router.post('/psdPpload',async ctx=>{
    	const file = ctx.request.files.file; // 获取上传文件
    	let psd = await PSD.open(file.path)
    	var timeStr = + new Date();
    	let descendantsList = psd.tree().descendants();
    	descendantsList.reverse();
    	let psdSourceList = []
    	let currentPathDir = `public/upload_static/psd_image/${timeStr}`
    	for (var i = 0; i < descendantsList.length; i++){
    		if (descendantsList[i].isGroup()) continue;
    		if (!descendantsList[i].visible) continue;
    		try{
    			await descendantsList[i].saveAsPng(path.join(ctx.state.SERVER_PATH, currentPathDir + `/${i}.png`))
    			psdSourceList.push({
    				...descendantsList[i].export(),
    				type: 'picture',
    				imageSrc: ctx.state.BASE_URL + `/upload_static/psd_image/${timeStr}/${i}.png`,
    			})
    		}catch (e) {
    			// 转换不出来的图层先忽略
    			continue;
    		}
    	}
    	ctx.body = {
    		elements: psdSourceList,
    		document: psd.tree().export().document
    	};
    })

    /**
     * html2canvas 跨域接口设置
     */
    router.get('/html2canvas/corsproxy', async ctx => {
    	ctx.body =  await request(ctx.query.url)
    })

    //配置ejs-template 模板引擎
    render(app, {
    	root: path.join(__dirname, 'views'),
    	layout: false,
    	viewExt: 'html',
    	cache: false,
    	debug: false
    });

    //配置静态web
    app.use(koaStatic(__dirname + '/public'), { gzip: true, setHeaders: function(res){
    	res.header( 'Access-Control-Allow-Origin', '*')
    }});

    const fs =  require('fs')
    fs.readdirSync('./routes').forEach(route=> {
        let api = require(`./routes/${route}`)
        app.use(api.routes(), api.allowedMethods())
    })

    const jwt = require('koa-jwt')
    app.use(jwt({ secret: 'yourstr' }).unless({
        path: [
            /^\/$/, /\/token/, /\/wechat/,
            { url: /\/papers/, methods: ['GET'] }
        ]
    }));

    module.exports = async (ctx, next) => {
    	await next().then(() => {
    		if (ctx.status === 200) {
    			ctx.body = {
    				message: '成功',
    				code: 200,
    				body: ctx.body,
    				status: true
    			}
    		} elseif (ctx.status === 201) { // 201处理模板引擎渲染
    
    		} else {
    			ctx.body = {
    				message: ctx.body || '接口异常，请重试',
    				code: ctx.status,
    				body: '接口请求失败',
    				status: false
    			}
    		}
    	}).catch((err) => {
    		if (err.status === 401) {
    			ctx.status = 401;
    			ctx.body = {
    				code: 401,
    				status: false,
    				message: '登录过期，请重新登录'
    			}
    		} else {
    			throw err
    		}
    	})
    }
    

    const cors = require('koa2-cors');
    app.use(cors());

    // config/mongo.js
    const mongoose = require('mongoose').set('debug', true);
    const options = {
        autoReconnect: true
    }
    
    // username 数据库用户名
    // password 数据库密码
    // localhost 数据库ip
    // dbname 数据库名称
    const url = 'mongodb://username:password@localhost:27017/dbname'
    
    module.exports = {
        connect: ()=> {
            mongoose.connect(url,options)
            let db = mongoose.connection
            db.on('error', console.error.bind(console, '连接错误:'));
            db.once('open', ()=> {
                console.log('mongodb connect suucess');
            })
        }
    }

    const mongoConf = require('./config/mongo');
    mongoConf.connect();

    npm run dev-client

    npm run dev-server

    npm run lib:h5-swiper