Learn how to create a single-page application with Vue and the vue-router.
- [Narrator] In this video, I'll show you how to…install Vue Router and start setting up…a single-page application.…Continuing from where we left off in the last video,…with our application broken up into…manageable, single-file components,…the first thing I'll do is install Vue Router,…which is in a separate package from the core Vue script.…If I right-click the single file components folder,…I can go to open a terminal here,…and then I'm just going to run npm install vue-router…with the save option which will add…a second dependency to this object in package.json…that we looked at earlier which lists the packages…that are needed to run the application.…
As opposed to the ones below that are needed to…build the application in this particular way.…So now that Vue Router is installed, I'm going to…go back over to main.js and add an import statement…to load it from the known modules folder.…The next thing I want to do is to define…the routes that I'm going to need.…And I'll declare that as an array constant…since we'll only set it once.…
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton