After a whirlwind overview of Vue's key features, I'm sure you're keen now to start properly learning Vue and putting it to use. Let's first have a look at the case-study project you'll be building throughout the book.
Vuebnb is a realistic, full-stack web application which utilizes many of the main features of Vue, Laravel, and the other tools and design patterns covered in this book.
From a user's point of view, Vuebnb is an online marketplace for renting short-term lodgings in cities around the world. You may notice some likeness between Vuebnb and another online marketplace for accommodation with a similar name!
You can view a completed version of Vuebnb here: http://vuebnb.vuejsdevelopers.com.
Figure 1.3. Vuebnb home page
Figure 1.4. Vuebnb listing page
The case-study project runs through the entire duration of this book, so once you've created the code base you can keep adding to it chapter by chapter. By the end, you'll have built and deployed a full-stack app from scratch.
The code base is in a GitHub repository. Download it in whatever folder on your computer that you normally put projects in, for example,
$ cd ~/Projects $ git clone https://github.com/PacktPublishing/Full-Stack-Vue.js-2-and-Laravel-5 $ cd Full-Stack-Vue.js-2-and-Laravel-5
Rather than cloning this repository directly, you could first make a fork and clone that. This will allow you to make any changes you like and save your work to your own remote repository. Here's a guide to forking a repository on GitHub: https://help.github.com/articles/fork-a-repo/.
The code base contains the following folders:
Figure 1.5. Code base directory contents
Here's a rundown of what each folder is used for:
Chapter10contains the completed state of the code for each chapter (excluding this one)
- The images directory contains sample images for use in Vuebnb. This will be explained in Chapter 4, Building a Web Service with Laravel
- vuebnb is the project code you'll use for the main case-study project that we begin work on in Chapter 3, Setting Up a Laravel Development Environment
- vuebnb-prototype is the project code of the Vuebnb prototype that we'll build in Chapter 2, Prototyping Vuebnb, Your First Vue.js Project