Vue3 设置 #app 样式指南：三种方法详解

<p>在 Vue3 中设置 ' #app ' 的样式可以使用以下方法：</p>
<ol>
<li>在 ' App.vue ' 组件的 '<template>' 中添加一个带有 ' id=&quot;app&quot; ' 的元素，如：</li>
</ol>
<pre><code class="language-html">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;!-- your app content --&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<ol start="2">
<li>在 ' App.vue ' 组件的 '<style>' 中设置 ' #app ' 的样式，如：</li>
</ol>
<pre><code class="language-css">&lt;style&gt;
#app {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  /* more styles */
}
&lt;/style&gt;
</code></pre>
<ol start="3">
<li>如果你使用了全局的样式，可以在 ' main.js ' 中引入样式文件并设置 ' body ' 或 ' html ' 的样式，如：</li>
</ol>
<pre><code class="language-javascript">import './assets/css/global.css'

// set body style
document.body.style.backgroundColor = '#fff';
document.body.style.color = '#333';
document.body.style.fontSize = '16px';
// more styles
</code></pre>
<p>注意：在 Vue3 中，不推荐直接修改 DOM，上述方法只是为了演示如何设置 ' #app ' 的样式。更好的方式是使用 Vue3 提供的样式绑定和全局样式设置方法。例如，使用 ':style' 或 ' class ' 绑定元素的样式，或者在 ' App.vue ' 组件中使用 ' scoped ' 样式。</p>