Setting up the project

Download the chapter 2 files and extract the project setup into an empty folder. You should have the following content:

• index.html: The web page
• style.css: The CSS file
• svg: Contains all the SVG images of the game
• cards.js: With all the cards data ready to use
• state.js: Where we will consolidate the main data properties of the game
• utils.js: Where we will write useful functions
• banner-template.svg: We will use the content of this file later

We will start with our main JavaScript file--create a new file called main.js.

Open the index.html file and add a new script tag referencing the new file, just after the state.js one:

<!-- Scripts -->
<script src="utils.js"></script>
<script src="cards.js"></script>
<script src="state.js"></script>
<script src="main.js"></script>

Let's create the main instance of our app in the main.js file:

new Vue({
  name: 'game',
  el: '#app',
})

We are now ready to go!