xchao0213/engine.js

## engine.js
import Vue from 'vue';
import xImg from './components/x-img';
import xText from './components/x-text';

Vue.config.productionTip = true;

const Engine = {
  name: 'engine',
  components: {},
  methods: {
    renderContent(h, element) {
      return (
        <div>
        {h(element.name, element.value)}
        </div>
      );
    }
  },
  render(h) {
    const { contents } = window.page;
    return (
    <div> {
      contents.map((ele) => {
        return (
          <div>
            { this.renderContent(h, ele) }
          </div>
        );
      })
    }
    </div>
    );
  }
};

Vue.component(Engine.name, Engine);
Vue.component(xImg, xImg);
Vue.component(xText, xText);

export default {
  Engine
};

## index.ejs
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title><%= page.name %></title>
  </head>
  <body>
    <%- include('header'); -%>
    <h1>
      Title
    </h1>
    <div id="app">
      <engine />
    </div>
    <%- include('footer'); -%>

    <script src="/libs/vue.min.js"></script>
    <script>window.page = <%- JSON.stringify(page) %></script>
    <script src="/engine/engine.umd.min.js"></script>
    <script>
      // Vue.component('engine', window.Engine)
      new Vue({
        el: '#app',
        data: {},
      });
    </script>
  </body>
</html>
	import Vue from 'vue';
	import xImg from './components/x-img';
	import xText from './components/x-text';

	Vue.config.productionTip = true;

	const Engine = {
	name: 'engine',
	components: {},
	methods: {
	renderContent(h, element) {
	return (
	<div>
	{h(element.name, element.value)}
	</div>
	);
	}
	},
	render(h) {
	const { contents } = window.page;
	return (
	<div> {
	contents.map((ele) => {
	return (
	<div>
	{ this.renderContent(h, ele) }
	</div>
	);
	})
	}
	</div>
	);
	}
	};

	Vue.component(Engine.name, Engine);
	Vue.component(xImg, xImg);
	Vue.component(xText, xText);

	export default {
	Engine
	};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />

	<title><%= page.name %></title>
	</head>
	<body>
	<%- include('header'); -%>
	<h1>
	Title
	</h1>
	<div id="app">
	<engine />
	</div>
	<%- include('footer'); -%>

	<script src="/libs/vue.min.js"></script>
	<script>window.page = <%- JSON.stringify(page) %></script>
	<script src="/engine/engine.umd.min.js"></script>
	<script>
	// Vue.component('engine', window.Engine)
	new Vue({
	el: '#app',
	data: {},
	});
	</script>
	</body>
	</html>