Setting up the Vue project
Let’s start by installing vue-cli with a fresh VueJS project. As mentioned earlier, this chapter uses the webpack-simple template with “bulma-dashboard” as the name of the project.
The directory structure should look similiar to this:
- bulma-dashboard [project name folder]
- node_modules/
- src/
- assets/
- App.vue
- main.js
- index.html
- package.json
- README.md
- webpack.config.js
Preparing pages
Before continuing with implementing vue-router you should set up skeletons for all of your components. Create a new pages/ directory inside the src/ folder. Next, create .vue files for the components: Dashboard.vue, Books.vue, Orders.vue, and Login.vue. Your text editor of choice might be able to create .vue files already, but if not, here’s a little snippet for what the every .vue file should include:
<template></template><script>exportdefault{name:[INSERTNAMEOFCOMPONENT]}</script><style>...