ViteJS --为什么main.js有main.js？

Question

我是新来的前端工具。我开始使用Vite，我想知道为什么main.js文件中包含html代码。如果不使用自动完成、语法高亮等等，那么将html放在滴答中似乎是个坏主意。我习惯于拥有一个HTML文件，或者多个CSS文件和一个JS文件。有没有一种方法可以在不失去功能的情况下重构文件的外观？如果没有，是否应该为每个页面提供一个.js文件？如果是这样的话，是否有一种方法可以使html着色而不总是看起来是橙色的？

一定有比这更好的方法

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>
`

与What is the purpose ...不同的问题

Answer 1

为什么main.js文件中包含html代码。

只是个演示而已。在JS中动态添加HTML与使用JS框架的其他模板是一致的。

我习惯于拥有一个HTML文件，或者多个，一个CSS文件和一个JS文件。

你就可以这么做。是完全允许的。

是否有一种在不失去功能的情况下重组文件的方法？

您只需将HTML移动到index.html，并使用main.js中的JS添加动态映像src。