javascripthtmlvue.jsvue-climulti-page-application

multiple pages in Vue.js CLI


I'm having trouble figuring out how to have multiple pages in a Vue CLI project. Right now I have my home page with a few components and I want to create another page but I do not know how to do that. Am I supposed to create multiple html files where the index.html by default is? In a simple file structure with css js img folder and html files as pages I know that creating another html file means making another page. But I don't understand how this works with Vue CLI project.

I saw stuff like vue-router and "pages" in Vue documentation but I do not understand them very well. What are my alternatives? Is there a guide that explains that in detail, because I wasn't able to find any, let alone detailed. Would be very happy if you could help! Thank you!


Solution

  • Note pointing users to what should be the accepted answer
    At the moment of posting my initial answer, I wasn't aware of the possibility of actually building MPAs in VueJS. My answer doesn't address the question asked therefore I will recommend taking a look at the answer provided by PJ. Wanderson which should be the accepted answer

    Initial Answer
    Vue.js projects are SPAs(single-page applications). You only have one .html file in the entire project which is the index.html file you mentioned. The "pages" you want to create, in vue.js are referred to as components. They will be plugged into the index.html file and rendered in the browser. A vue.js component comprises 3 parts:

    <template>
        
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>
    

    You can check this tutorial out for a quick start: Getting started with Vue.

    It explains the Vue.js project structure and how the various files relate to each other