ViteJS - Why does main.js have HTML?

tazboy 0
Viewed 20

I'm new to frontend tooling. I started using Vite and I'm wondering why the main.js file has html code in it. It seems like a bad idea to put html in ticks and not have autocomplete, syntax highlighting, and such. I'm used to having an HTML file, or multiple, a CSS file, and a JS file. Is there a way to restructure the files to look like that without losing functionality? If not, should I have a .js file for each page? If so, is there a way to have the html colored and not always look orange?

There's got to be a better way than this:

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Dave!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`

Not the same question as What is the purpose ...

vite
1 Answers

why the main.js file has html code in it.

It's just a demo. And adding HTML dynamically in JS is consistent with other templates using JS frameworks.

I'm used to having an HTML file, or multiple, a CSS file, and a JS file.

You can just do that. It's completely allowed.

Is there a way to restructure the files to look like that without losing functionality?

You can just move the HTML to index.html and add set that dynamic image src using JS in main.js

Allan Chain0
Related