Using Vue-Router Dynamic Routes to Load Data Chapter 9Create a file for each component, view, and library, such as Vue, Vuex, and Vue-router.
Then, create a folder for each type of file. Finally, add an app.js—which is where the
libraries will be initialized.
You may also consider using the
vue-cli (https://github.com/vuejs/vue-cli) for building your app.
Beyond the scope of this book, as we only cover building a Vue app using
the included JavaScript files, the vue-cli application allows you to develop
your app in a more modular way and, once developed, deploy it in a
similar fashion to how we have been developing the app.Create an index.html and include your JavaScript files, ensuring Vue is loaded first and
your app's JavaScript last. Add a container for your app to form the view of our shop:
<!DOCTYPE html>
<html>
<head>
<title>Vue Shop</title>
</head>
<body>
<div id="app"></div><!-- Libraries -->
<script type="text/javascript" src="js/libs/vue.js"></script>
<script type="text/javascript" src="js/libs/vuex.js"></script>
<script type="text/javascript" src="js/libs/router.js"></script><!-- Components -->
<script src="js/components/ListCategories.js"></script>
<script src="js/components/ListProducts.js"></script>
<script src="js/components/ListPurchases.js"></script>
<script src="js/components/ProductFiltering.js"></script><!-- Views -->
<script src="js/views/PageNotFound.js"></script>
<script src="js/views/CategoryPage.js"></script>
<script src="js/views/HomePage.js"></script>
<script src="js/views/OrderBasket.js"></script>
<script src="js/views/OrderCheckout.js"></script>
<script src="js/views/OrderConfirmation.js"></script>
<script src="js/views/ProductPage.js"></script><!-- App -->
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>