Tourguide

Content of each folder

There is our logo and in the index.html there is the link for the website font and the link for all small icon like the facebook, twitter icon in the footer.

/public/favicon.ico & /public/index.html 

This folder contain the style of the whole website. The import of the style is in the /src/main.js

/scss

This folder contain all the components ressources we need to create our website In this folder. App.vue is the code with the basic "configuration" of the website, the haeder and the footer.

/src/
/src/App.vue
/src/main.js

Those two files is the two components we can see on the Home's page

/src/components/Hero.vue 
/src/components/Gallery.vue

Hero.vue

Gallery.vue

Main.js is the file code with all the routes we used on the website for now. Each time you see <router-link>it means that the main.js is called to correspondd on the right route

Example from Header.vue

We can just import first the corresponding code file

Then define the route

For avoid a random route in the browser search I added a route for redirect on a "Not found page". The route name is "/notfound" as you can see on the picture above.

Those folders containts all the images and plugins we used in our website

/src/assets/
/src/plugins/

This folder containt all the general component like Header, Footer etc.

/src/components/

This folder containt all the pages we can see on the website i.e. each city tour and each places we can visite. Including About's, Contact's, Home's pages. Each city are grouped by a folder. /views/name_of_city/

/views/

##How the whole website work

This code from App.vue is the first one called by the app

This App.vue calls the /src/components/Header.vue and /src/components/Footer.vue

Vuetify UIComponents :

All the design of the website is made with existing UIComponent on Vuetify official documentation :

Code of Gallery.vue https://vuetifyjs.com/en/components/images/#grid

Code of Footer.vue https://vuetifyjs.com/en/components/footer/#indigo-footer

Code of Hero.vue https://vuetifyjs.com/en/components/carousels/#usage

Datas - Example from Home.vue

Most of datas are load with a for loop

And generate with Vue

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Tour Guide's website plan (example for Seoul)

It's too big if i put every pages for every cities so I just put Seoul's tour guide for demonstrate.