ala-cli
Version:
aladdin develop utils
109 lines (95 loc) • 2.88 kB
JavaScript
/**
*
* @file base页处理
* @author alafe
* @date 2017/5/8
*
*/
const path = require('path');
const Vue = require('vue');
const vueRenderer = require('vue-server-renderer');
const parser = require('./vip-parser');
let dirRoot = process.cwd();
let appConf = require(path.join(dirRoot, 'app.conf'));
let renderer = vueRenderer.createRenderer();
// 注册全局filter
function filter(Vue) {
Vue.filter('makeTcUrl', value => {
return value;
});
}
// 执行注册
filter(Vue);
// 解析生成vue模板
function render(fileName, data, resolve, reject) {
let tplName = fileName.replace(/\/index$/, '');
let vueObj = parser.parse(fileName);
vueObj.css = parser.toCss(vueObj);
vueObj.js = ''; // parser.toJs(vueObj);
let vm = new Vue({
template: vueObj.root.template,
components: {
App: vueObj.instance
},
data() {
return data;
}
});
renderer.renderToString(vm, (err, html) => {
if (err) {
throw err;
}
resolve(renderPage(tplName, vueObj, data, html));
});
}
// 生成页面html
function renderPage(tplName, vueObj, data, html) {
let staticRoot = appConf.release.staticRoot;
let page = `
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/static/libs/pmd.css" />
<style>
* { margin:0; padding:0; }
body { font: 14px Arial,Helvetica,sans-serif; background-color: #f1f1f1; }
a { color: #00C; text-decoration: none; -webkit-tap-highlight-color: rgba(23,23,23,.1); }
</style>
<style>${vueObj.css}</style>
<script src="/static/libs/vue.min.js"></script>
<script src="/static/libs/vue.filter.js"></script>
<script src="/static/libs/require.min.js"></script>
</head>
<body>
<div id="${tplName}" class="c-container">
${html}
</div>
<script>${vueObj.js}</script>
<script>
window.addEventListener('load', function (e) {
var dom = document.getElementById('${tplName}').children[0];
var paths = {};
paths['${staticRoot}'] = '/static';
require.config({ paths: paths });
var vm = new Vue({
el: dom,
template: '${vueObj.root.template}',
components: {
App: function (resolve) {
require(['${staticRoot}/${vueObj.path}'], resolve);
}
},
data: function () {
return ${JSON.stringify(data)}
}
});
});
</script>
</body>
</html>
`;
return page;
}
module.exports = render;