Svelte-QWER 项目教程

Svelte-QWER 项目教程

svelte-QWER✒︎ Simply Awesome Blog Starter built with SvelteKit and Love ❤项目地址:https://gitcode.com/gh_mirrors/sv/svelte-QWER

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

svelte-QWER/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   ├── layouts/
│   │   ├── stores/
│   │   ├── utils/
│   ├── routes/
│   ├── app.html
│   ├── global.css
├── static/
│   ├── images/
│   ├── favicon.png
├── .gitignore
├── package.json
├── README.md
├── svelte.config.js
├── tsconfig.json
├── vite.config.ts

目录结构介绍

• src/: 源代码目录
  • lib/: 包含项目的主要功能模块
    • components/: 存放可重用的组件
    • layouts/: 存放页面布局组件
    • stores/: 存放全局状态管理
    • utils/: 存放工具函数
  • routes/: 存放路由相关的文件
  • app.html: 应用的模板文件
  • global.css: 全局样式文件
• static/: 静态资源目录
  • images/: 存放图片资源
  • favicon.png: 网站图标
• .gitignore: Git忽略文件配置
• package.json: 项目依赖和脚本配置
• README.md: 项目说明文档
• svelte.config.js: Svelte配置文件
• tsconfig.json: TypeScript配置文件
• vite.config.ts: Vite配置文件

2. 项目的启动文件介绍

启动文件

• src/app.html: 这是应用的模板文件，包含了页面的基本结构和样式。
• src/routes/__layout.svelte: 这是应用的默认布局文件，定义了页面的整体布局。

启动流程

1. npm run dev: 启动开发服务器。
2. vite.config.ts: 配置Vite开发服务器。
3. svelte.config.js: 配置Svelte应用。
4. src/app.html: 加载应用模板。
5. src/routes/__layout.svelte: 加载默认布局。

3. 项目的配置文件介绍

配置文件

• svelte.config.js: Svelte配置文件，包含编译选项、插件配置等。
• tsconfig.json: TypeScript配置文件，包含编译选项、路径映射等。
• vite.config.ts: Vite配置文件，包含开发服务器、构建选项等。

配置文件示例

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(),
  kit: {
    adapter: adapter()
  }
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext", "dom"],
    "allowJs": true,
    "checkJs": true,
    "jsx": "preserve",
    "jsxImportSource": "svelte",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "$lib/*": ["src/lib/*"],
      "$routes/*": ["src/routes/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

vite.config.ts

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

export default define

svelte-QWER✒︎ Simply Awesome Blog Starter built with SvelteKit and Love ❤项目地址:https://gitcode.com/gh_mirrors/sv/svelte-QWER