执行Svelte初始化后App.svelte文件未出现的问题咨询

问题原因 #

执行npm create svelte@latest myapp时如果选择了空白模板（Blank template），项目默认仅生成src/app.html作为入口，不会包含Svelte组件文件。

手动配置解决方案 #

1. 创建App.svelte组件 #

在src目录下新建App.svelte，写入基础Svelte代码：

<script>
  let greeting = "Hello Svelte!";
</script>

<main>
  <h1>{greeting}</h1>
</main>

<style>
  main {
    text-align: center;
    padding: 2rem;
  }
</style>

2. 修改app.html挂载组件 #

打开src/app.html，在<body>标签末尾添加挂载脚本，将App组件绑定到页面的#app容器：

<!-- 保留原app.html的head和<div id="app"></div>内容 -->
<script type="module">
  import { mount } from 'svelte';
  import App from './App.svelte';

  mount(App, {
    target: document.getElementById('app')
  });
</script>

3. 重启开发服务 #

停止当前的npm run dev进程，重新执行：

npm run dev

此时访问页面就能看到App.svelte的内容，正常进行Svelte开发。

可选方案：重新初始化带组件的项目 #

如果希望直接使用预设好的组件结构，重新执行初始化命令：

npm create svelte@latest myapp

在模板选择环节，挑选Skeleton project（骨架项目）或SvelteKit demo app，这类模板会自动生成App.svelte及配套配置，无需手动修改。

内容的提问来源于stack exchange，提问作者M.M.M.