Full code: https://github.com/aleksvp2017/simpleui
Using:
Vue;
Vuetify
Vue-Router
I'm assuming you do have node installed (if you don't, just go here).
So, the main idea is to configure a very simple UI with a couple of routes in a basic menu. With the structure I'm going to show you, you can evolve to something very complex (I will be posting about protected routes, login, session state, tokens and all that stuff).
So, first step, is to install Vue and to create a UI project using webpack. Inside the directory that you want to use:
npm i vue
vue init webpack-simple
Next, install Vuetify following the instructions here. I suggest you use webpack install.
The last thing you need is Vue Router:
npm install vue-router
Now, we're good to go.
First we're going to create two simple components just to demonstrate the navigation process (Home.vue and Contact.vue):
<template> <div> Home </div> </template>
and
<template> <div> Contact </div> </template>
I like to create the routes file in the root of src directory:
import VueRouter from 'vue-router' import Vue from 'vue' import Home from './views/home/Home.vue' import Contact from './views/contact/Contact.vue' var routes = [ { path: '/', name: 'Home', component: Home}, { path: '/contact', name: 'Contact', component: Contact}, ]; Vue.use(VueRouter) const router = new VueRouter({ routes}); export { router, routes }
As you can see, you define the routes as an array. As your app starts to grow you can add more info to the routes, for instance, if it needs authentication. For now, we're just setting the pair URI and component that is going to respond for it.
In the entry point of the app, usually main.js:
import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify' import {router} from './routes.js' new Vue({ el: '#app', router, vuetify, render: h => h(App) })
Basically, we're importing the router and telling Vue Global Object to use it.
Bellow is the component I'm using for the navigation (Navigation.vue). It is using v-app-bar from Vuetify.
<template> <v-app-bar app color="#0D2F52" dark> <v-toolbar-title> <h2> <v-btn color="#0D2F52" dark elevation="0" to="/"> <v-icon dark right color="#389F9E">mdi-home</v-icon> </v-btn> <span style="color:#389F9E;font-family: 'Montserrat';" > Simple UI </span> </h2> </v-toolbar-title> <v-spacer></v-spacer> <div > <v-btn color="#0D2F52" x-large v-for="(route, index) in routes" :key="index" :to="route.path"> {{route.name}} </v-btn> </div> </v-app-bar> </template> <script> import { routes } from '../../routes.js' export default { data() { return { routes, } }, } </script> The import thing here is that we're importing the routes and using then to mount the menu items with their names, and paths.
The last step is on App.vue:
<template>
<v-app>
<navigation/>
<v-content>
<router-view/>
</v-content>
</v-app>
</template>
<script>
import Navigation from './views/navigation/Navigation.vue'
export default {
components: {
'navigation': Navigation
},
}
</script>
Each component is going to be loaded where the router-view tag is placed as you click on the items of the menu.
That covers almost everything. Piece of cake!
Commenti