Initial commit
This commit is contained in:
sheychen
commit
862dac5252
|
|
@ -0,0 +1,34 @@
|
|||
<!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>Raith</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="lib/lodash.js"></script>
|
||||
<script src="lib/axios.js"></script>
|
||||
<script src="lib/vue.full.js"></script>
|
||||
<script src="lib/httpVueLoader.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="pages-list">
|
||||
<p v-if="pages.error" style="color: orangered">{{ pages.error }}</p>
|
||||
<template v-else-if="pages.data">
|
||||
<button v-for="page in pages.data" @click="showPage(page)">{{ page.name }}</button>
|
||||
</template>
|
||||
<p v-else>Loading...</p><!--TODO: Cool loader-->
|
||||
</div>
|
||||
<div id="active-page">
|
||||
<div v-if="activePage">
|
||||
<keep-alive>
|
||||
<div :is="activePage"></div>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
<p>Hello world</p>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,66 @@
|
|||
const API = axios.create({
|
||||
baseURL: './',
|
||||
timeout: 1000/*,
|
||||
headers: {
|
||||
'X-Custom-Header': 'foobar'
|
||||
}*/
|
||||
});
|
||||
|
||||
const APP = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
pages: {
|
||||
error: null,
|
||||
data: null
|
||||
},
|
||||
activePage: null
|
||||
},
|
||||
created() {
|
||||
API.get('pages.json').then(resp => {
|
||||
this.pages.data = resp.data
|
||||
}).catch(err => {
|
||||
this.pages.error = err.response.statusText
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showPage(mod) {
|
||||
var key = 'raith-' + mod.key
|
||||
this.$options.components[key] = () => ({
|
||||
// Dynamicly load component
|
||||
component: new Promise((resolve, reject) => {
|
||||
const loaded = () => key in Vue.options.components
|
||||
|
||||
const load = () => loaded() ?
|
||||
resolve(Vue.options.components[key]) : reject()
|
||||
|
||||
if (loaded() || document.querySelector('script[src="' + mod.src + '"]')) { //allready loaded
|
||||
load()
|
||||
return;
|
||||
}
|
||||
|
||||
const el = document.createElement('script')
|
||||
|
||||
el.type = 'text/javascript'
|
||||
el.async = true
|
||||
el.src = mod.src
|
||||
if (mod.integrity != null)
|
||||
el.integrity = mod.integrity
|
||||
|
||||
el.addEventListener('load', load)
|
||||
el.addEventListener('error', reject)
|
||||
el.addEventListener('abort', reject)
|
||||
|
||||
document.head.appendChild(el)
|
||||
}),
|
||||
loading: {
|
||||
template: '<p>Loading...</p>' //TODO: Cool loader
|
||||
},
|
||||
error: {
|
||||
template: `<p style="color: red">Can't load module</p>` //TODO: Sad error
|
||||
},
|
||||
timeout: 5000
|
||||
})
|
||||
this.activePage = key
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
[
|
||||
{
|
||||
"name": "Test1",
|
||||
"key": "test1",
|
||||
"src": "pages/test1/main.js"
|
||||
},
|
||||
{
|
||||
"name": "Test2",
|
||||
"key": "test2",
|
||||
"src": "pages/test2/main.js"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
Vue.component('raith-test1', {
|
||||
template: `<div><p>{{ yolol }}</p></div>`,
|
||||
methods: {},
|
||||
data() {
|
||||
return {
|
||||
yolol: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
API.get('pages.json').then(resp => {
|
||||
this.yolol = resp.data[0]
|
||||
}).catch(err => {
|
||||
this.yolol = err.response.statusText
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
Vue.component('raith-test2', {
|
||||
template: `<div><p>{{ yolol }}</p></div>`,
|
||||
methods: {},
|
||||
data() {
|
||||
return {
|
||||
yolol: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
API.get('pages.json').then(resp => {
|
||||
this.yolol = resp.data
|
||||
}).catch(err => {
|
||||
this.yolol = err.response.statusText
|
||||
})
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue