Svelte Easyroute 项目教程

1. 项目的目录结构及介绍

svelte-easyroute/
├── src/
│   ├── routes/
│   │   ├── Home.svelte
│   │   ├── About.svelte
│   │   └── ...
│   ├── main.js
│   ├── App.svelte
│   └── ...
├── public/
│   ├── index.html
│   └── ...
├── package.json
├── vite.config.js
└── ...

• src/: 包含项目的源代码。
  • routes/: 存放路由组件。
  • main.js: 项目的入口文件。
  • App.svelte: 主应用组件。
• public/: 存放静态资源文件。
  • index.html: 主 HTML 文件。
• package.json: 项目的依赖和脚本配置文件。
• vite.config.js: Vite 的配置文件。

2. 项目的启动文件介绍

main.js

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'world'
  }
});

export default app;

• 导入主应用组件 App.svelte。
• 创建 App 实例，并将其挂载到 document.body。
• 传递 props 给主应用组件。

3. 项目的配置文件介绍

package.json

{
  "name": "svelte-easyroute",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "svelte": "^3.0.0",
    "svelte-easyroute": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• scripts: 定义开发、构建和预览的脚本。
• dependencies: 项目运行时的依赖。
• devDependencies: 开发时的依赖。

vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  server: {
    port: 3000
  }
});

• 导入 Vite 和 Svelte 插件。
• 配置插件，使用 Svelte 插件。
• 配置开发服务器端口 为 3000。