ndi-2018
/
main
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added vue-router

This commit is contained in:
xdrm-brackets 2017-12-05 00:00:22 +01:00
parent 092836359b
commit 3b524fbe93
4 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package.json
View File

@ -6,11 +6,11 @@
"license": "MIT",
"private": true,
"scripts": {
"build:clean": "rm ./public_html/js/bundle@*.js*",
"build:clean": "rm ./public_html/js/bundle@*.js*",
"build:bundle": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build:dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
"dev": "npm run build:clean; npm run build:dev",
"build": "npm run build:clean; npm run build:bundle"
"build:dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
"dev": "npm run build:clean; npm run build:dev",
"build": "npm run build:clean; npm run build:bundle"
},
"dependencies": {
"vue": "^2.5.9"
@ -30,6 +30,7 @@
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.5.9",
"vue-router": "^2.5.3",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.5"
}

21
view/main.js
View File

@ -2,11 +2,13 @@
---------------------------------------------------------*/
/* (1) NPM libs */
import Vue from 'vue'
import VueRouter from 'vue-router'
/* (2) Internal libs */
import {API} from './lib/api-es6'
import {InfoBox} from './lib/infobox-es6'
import {API} from './lib/api-es6'
import {InfoBox} from './lib/infobox-es6'
import {WSClient,WSClientBuilder} from './lib/ws-client-es6'
import routes from './routes'
/* (3) Vues */
import wrapper_vue from './vue/wrapper.vue'
@ -25,13 +27,18 @@ require('./vue-config');
window.gstore.add('server', window._SERVER);
window.infobox = new InfoBox(window.gstore.data.info);
/* (4) Render view */
/* (4) Init vue router */
Vue.use(VueRouter);
window.router = new VueRouter({
mode: 'history',
routes: routes[0]
});
/* (5) Render view */
new Vue({
el: '#main-vue',
render: h => h(wrapper_vue),
data: {
gstore: window.gstore.data
}
router: window.router,
render: h => h(wrapper_vue)
})

19
view/routes.js Normal file
View File

@ -0,0 +1,19 @@
export default { 0: [
{
path: '/dashboard/',
component: require('./vue/container/dashboard.vue')
}, {
path: '/profile/',
component: require('./vue/container/profile.vue')
}, {
path: '/message/',
component: require('./vue/container/message.vue')
}, {
path: '/notifications/',
component: require('./vue/container/notifications.vue')
}, {
path: '*',
redirect: '/dashboard/'
}
]}

19
view/vue/wrapper.vue
View File

@ -8,10 +8,7 @@
<menu-comp></menu-comp>
<!-- Container -->
<dashboard-container v-show="gstore.menu_item_active == 'dashboard'" ></dashboard-container>
<profile-container v-show="gstore.menu_item_active == 'profile'" ></profile-container>
<message-container v-show="gstore.menu_item_active == 'inbox'" ></message-container>
<notifications-container v-show="gstore.menu_item_active == 'notifications'" ></notifications-container>
<router-view></router-view>
</div>
</template>
@ -25,24 +22,14 @@
import header_vue from './header.vue';
import menu_vue from './menu.vue';
import dashboardContainer_vue from './container/dashboard.vue';
import profileContainer_vue from './container/profile.vue';
import messageContainer_vue from './container/message.vue';
import notificationsContainer_vue from './container/notifications.vue';
export default {
name: 'wrapper',
data(){ return {
gstore: window.gstore.data
}; },
components: {
'HeaderComp': header_vue,
'MenuComp': menu_vue,
'DashboardContainer': dashboardContainer_vue,
'ProfileContainer': profileContainer_vue,
'MessageContainer': messageContainer_vue,
'NotificationsContainer': notificationsContainer_vue
'HeaderComp': header_vue,
'MenuComp': menu_vue
}
}
</script>