Don't understand project structure of Vue project created with vue-cli

Question

I am new to Vue.js and have never used a frontend framework before.

I created a project using the "vue create" command with the usual plugins and everything (nothing game changing), and everything worked fine. I wanted to start from 0, so I removed everything but the index.html file in the public directory, the main.js file in the src directory and the configuration files(see below).

Now when I load the page you can see "Test" and "{{message}}" for an instant and then it disappears leaving the page completely blank.

So my question is, how is the main.js file connected to the index.html file. I know from webpack that you need an entry point and link everything from there, but i cannot find such thing here, as main.js doesn't include index.html. So why doesn't my code work as intended? I want it to say Hello World.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>Vue Getting Started</title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but vue_getting_started doesn't work properly without
        JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app">
      <h1>Test</h1>
      <h1>{{ message }}</h1>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

import Vue from 'vue'

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

Vue CLI uses Webpack, so you'll need to investigate setting up with Webpack if you want to create your own project from scratch in the same way Vue CLI does. — zero298
– zero298, Commented Aug 22, 2019 at 15:05

Tobias G. · Accepted Answer · 2019-08-22 15:23:35Z

1

Where you see the line

<!-- built files will be auto injected -->

is where webpack will inject a script tag that loads the bundled javascript, you should be able to see that when you use the devtools. This is where your main entry chunk is being loaded. However, this only happens if webpack is actually doing its job either by running the dev server or by creating a production bundle.

If by "when I load the page" you mean opening up the index.html file in your browser, this won't do much. You will need to run webpack, in the newer versions of the vue cli you can do that by navigating to the root folder and running vue-cli-service serve

answered Aug 22, 2019 at 15:23

Tobias G.

3511 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marco Rodriguez Over a year ago

thank you for your answer, and yes webpack is bundling everything into index.html as I am using the dev server, however instead of filling in "Hello World" into the {{message}} part, everything just disappears.

Marco Rodriguez Over a year ago

I also get an error message in the chrome console: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Tobias G. Over a year ago

You should be able to set the runtime compiler to true in the vue.config.js file in your root folder. cli.vuejs.org/config/#runtimecompiler by adding runtimeCompiler: true in the exported object. see if that resolves your issue.

Collectives™ on Stack Overflow

Don't understand project structure of Vue project created with vue-cli

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related