svelte入门

项目构建

npm create vite@latest svelte项目名称  --template svelte
或者
npm create vite@latest svelte项目名称  --template svelte-ts
cd svelte项目名称

npm install

创建SvelteKit 项目

npm create svelte@latest 项目名称

SvelteKit是使用 Svelte 来构建 Web 应用的框架类似于 Next.js Nuxt.js

使用基础

<div id="root"></div>

import App from './App.svelte';

new App({
  target: document.querySelector('#root')
})

模板示例

<script>
//代码文件
let name = "张三"
</script>
<div> {name}</div>
<style>
/* 样式文件*/
</style>

SSR应用

Svelte 可以与后端配合开发服务器端渲染（SSR）应用
无论是 Node.js 中的 Express、Koa，还是其他服务器端技术栈，Svelte 都可以通过适当的配置和接口与它们进行交互。

缺点

目前没有什么ui 框架

常用语法

双向绑定

bind:value={name}

复选

bind:group={一个数组变量}

点击事件

on:click=xxx

组件

每一个 svelte 都是一个组件

<script>
form dd  import './dd.svelte'
</script>
</dd>
<style>
/* 样式文件*/
</style>

插槽

组件嵌套使用组件复用

匿名插槽

   <script>
     export let title;
   </script>

   <h1>{title}</h1>
   <div class="content">
     <!--子 组件中 定义插槽-->
     <slot>Default content</slot>
   </div>

    <script>
     import MyComponent from './MyComponent.svelte';
   </script>
    <!--父组件中 使用插槽-->
   <MyComponent title="My Title">
     <p>This is custom content for the slot.</p>
   </MyComponent>

具名插槽（有名字的）

   <script>
     export let title;
   </script>

   <h1>{title}</h1>
   <div class="content">
     <slot name="header">Default header</slot>
     <slot>Default content</slot>
     <slot name="footer">Default footer</slot>
   </div>

    <script>
     import MyComponent from './MyComponent.svelte';
   </script>

   <MyComponent title="My Title">
     <h2 slot="header">Custom header</h2>
     <p>This is custom content for the default slot.</p>
     <p slot="footer">Custom footer</p>
   </MyComponent>

父传子

props属性方式


   <script>
     export let name;
   </script>
<!--子 定义 -->
   <p>Hello, {name}!</p>

    <script>
     import ChildComponent from './ChildComponent.svelte';
   </script>
    <!--父传值 -->
   <ChildComponent name="John"/>

stores 存储方式

   import { writable } from 'svelte/store';
    <!--使用 writable、readable 或 derived 函数创建一个存储 -->
   const message = writable('Hello from parent');

   <script>
     import ChildComponent from './ChildComponent.svelte';
     import { message } from './stores';
   </script>
    <!--从 stores中获取 传递 -->
   <ChildComponent message={message}/>

    <script>
     export let message;
   </script>
<!--子接收 -->
   <p>{$message}</p>

上下文传递

 <script>
     import { setContext } from 'svelte';
     import ChildComponent from './ChildComponent.svelte';

     const data = { message: 'Hello from parent' };
    <!--父传递 -->
     setContext('parentData', data);
   </script>

   <ChildComponent />

   <script>
     import { getContext } from 'svelte';
    <!--子接收 -->
     const parentData = getContext('parentData');
   </script>

   <p>{parentData.message}</p>

子传父

上下传参

渲染html

事件

响应性

对象数据处理

条件渲染

列表渲染

await模板

生命周期

onMount
当一个组件被加载到网页中也就是挂载到 DOM，DOM 就是网页上展示内容的结构
使用场景
初始化数据获取
设置事件监听器
beforeUpdate
在组件即将更新之前调用
验证数据变化，可以检查新的状态值是否合法或符合特定的业务规则
记录状态变化前的信息，记录当前状态，以便后续分析或调试
afterUpdate
在组件更新完成后调用
操作 DOM，在组件更新后，操作 DOM 元素
第三方库集成，继承ui框架
onDestroy
在组件即将被销毁时调用
清理资源，当组件被销毁时，清理不再需要的资源，如移除事件监听器、取消定时器、关闭连接等
保存状态：如果需要在组件销毁前保存组件的状态，可以在onDestroy中进行操作。例如，保存用户的输入内容以便下次组件挂载时恢复。
onTick
在浏览器重绘之后执行
在每一帧之后执行一些操作，但要注意性能影响，避免过度使用
使用场景
动画和过渡效果，可以在每一帧之后执行一些操作来实现复杂的动画效果。例如，在一个动画效果需要逐帧更新的场景中，可以在onTick中更新元素的位置或样式
性能监测，可以在每一帧之后检查性能指标，如帧率，以监测应用的性能表现。但要注意，过度使用onTick可能会导致性能问题。
onError
可以捕获组件内部的错误
当组件内发生错误时，可以使用这个来处理错误情况
错误处理和报告，当组件内部发生错误时，可以捕获错误并进行适当的处理，如显示错误消息给用户、记录错误日志等

程序入口

默认是 app.html ,app.svelte main.ts

SvelteKit 项目

package.json 中包含 sveltejs/kit
区别
查看 package.json 中的依赖
SvelteKit 项目：

依赖中包含 @sveltejs/kit。

{
  "devDependencies": {
    "@sveltejs/kit": "^1.0.0",
    "svelte": "^3.0.0",
    "vite": "^4.0.0",
    // 其他依赖
  }
}

非 SvelteKit 的 Svelte 项目：

没有 @sveltejs/kit 依赖，通常使用其他构建工具，如 Rollup 或 Webpack。

{
  "devDependencies": {
    "svelte": "^3.0.0",
    "rollup": "^2.0.0",
    // 其他依赖
  }
}

注意：如果您的项目没有 @sveltejs/kit，那么它可能是一个普通的 Svelte 项目，而非 SvelteKit 项目。

检查 svelte.config.js 文件
SvelteKit 项目：

配置文件中包含 kit 配置项。

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

export default {
  kit: {
    adapter: adapter(),
    // 其他 SvelteKit 特有的配置
  },
  // 其他配置
};

非 SvelteKit 的 Svelte 项目：

svelte.config.js 中没有 kit 属性，配置通常与 Svelte 本身相关。

export default {
  // 例如，配置预处理器
  preprocess: sveltePreprocess(),
  // 其他配置
};

关键区别：kit 属性是 SvelteKit 专有的配置项，用于定义路由、适配器等。如果 svelte.config.js 中没有 kit，那么项目可能不是 SvelteKit 项目。

项目结构和文件
SvelteKit 项目：

src/routes/ 目录：使用文件系统路由，页面组件位于此处。
+page.svelte、+layout.svelte 文件：这是 SvelteKit 特有的页面组件命名方式。
可能包含 src/hooks.js 或 src/hooks.server.js：用于处理请求的生命周期钩子。
非 SvelteKit 的 Svelte 项目：

没有 src/routes/ 目录，或者目录结构不同。
页面组件可能位于 src/components/ 或 src/ 目录下，但不使用 +page.svelte 命名。
入口文件通常是 src/main.js 或 src/App.svelte。

构建和启动脚本
SvelteKit 项目：

使用 Vite 作为构建工具，package.json 中的脚本类似：

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }
}

非 SvelteKit 的 Svelte 项目：

使用 Rollup 或 Webpack 等工具，脚本可能是：

{
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rollup -c"
  }
}

提示：查看 package.json 中的 scripts，如果使用 vite，且有 vite dev、vite build 等命令，可能是 SvelteKit 项目。

查看路由实现方式
SvelteKit 项目：

使用文件系统路由，无需手动配置路由。页面组件位于 src/routes 目录下，文件名映射为 URL 路径。
非 SvelteKit 的 Svelte 项目：

需要手动配置路由，通常使用第三方路由库，如 svelte-routing。
在代码中明确地定义路由规则。

服务端渲染（SSR）支持
SvelteKit 项目：

原生支持服务端渲染（SSR）和静态站点生成（SSG），不需要额外配置。
非 SvelteKit 的 Svelte 项目：

默认是客户端渲染，需要额外的配置或工具才能实现 SSR。

适配器的使用
SvelteKit 项目：

使用适配器来部署到不同的平台，如 @sveltejs/adapter-node、@sveltejs/adapter-static 等。
非 SvelteKit 的 Svelte 项目：

通常不涉及适配器的概念。

环境配置文件
SvelteKit 项目：

支持环境变量，使用 .env 文件，并且可以通过 $env 模块访问环境变量。
非 SvelteKit 的 Svelte 项目：

需要手动配置环境变量的处理方式，可能依赖于构建工具的插件。

开发者工具
SvelteKit 项目：

开发时可以使用 HMR（热模块替换）和 Vite 的开发者体验。
非 SvelteKit 的 Svelte 项目：

可能需要额外配置 HMR，开发体验取决于所用的构建工具。

安装sveltejs/kit 改成 SvelteKit项目

npm install @sveltejs/kit

目录结构

src/routes 目录用于存放路由组件
src/lib 目录可能用于存放一些通用的库代码
src/app.html 作为项目的 HTML 模板

新版 app.svelte

import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app')!,
})

export default app

新版 index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite11 + Svelte + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

tsconfig.json 描述

{
    "extends": "./.svelte-kit/tsconfig.json",  // 继承的 tsconfig.json对他进行扩展
    "compilerOptions": {
        "target": "ESNext",    // 指定 TypeScript 编译器应输出 ES 模块（即 import 和 export 语法），而不是默认的 CommonJS 模块。这意味着 TypeScript 编译时会生成符合 ECMAScript 规范的模块。
        "useDefineForClassFields": true,
        "module": "ESNext",
        "allowJs": true, // 允许 TypeScript 编译器处理 JavaScript 文件，用于项目中存在js代码
        "checkJs": true, // 启用对 JavaScript 文件的类型检查
        "esModuleInterop": true, //启用 ES 模块互操作性。有助于在 TypeScript 项目中更好地使用 ES 模块语法。
        "forceConsistentCasingInFileNames": true,//强制文件名的大小写一致性
        "resolveJsonModule": true, // 允许 TypeScript 编译器解析 .json 文件作为模块。这样可以在 TypeScript 代码中直接导入和使用 JSON 数据。。
        "skipLibCheck": true,//跳过对声明文件（.d.ts）的类型检查。这可以加快编译速度，特别是在使用大型的第三方库时，因为这些库的声明文件通常不需要进行详细的类型检查。
        "sourceMap": true, //生成源映射文件。源映射文件可以帮助在开发工具中进行调试，将编译后的代码映射回原始的 TypeScript 代码，以便更容易地定位错误。
        "strict": true， // 启用严格类型检查模式
        "isolatedModules": true, //启用独立模块模式。在这种模式下，每个文件都被视为一个独立的模块
        "moduleDetection": "force" // 强制 TypeScript 使用特定的模块检测策略
    }
  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/main.ts", "src/main.ts"], // 这指定了 TypeScript 编译器应该处理的文件范围。在这个例子中，包括了 src 目录下的所有 .ts、.js 和 .svelte 文件，以及特定的 src/main.ts 文件。这确保了项目中的 TypeScript、JavaScript 和 Svelte 组件都能被正确编译和类型检查
  "references": [{ "path": "./tsconfig.node.json" }] // 这表示引用了另一个名为 tsconfig.node.json 的配置文件。这种引用可以用于将项目的不同部分（例如服务器端代码和客户端代码）进行分离配置，或者在特定的环境（如 Node.js 环境）中使用不同的 TypeScript 配置。
}

.d.ts 一般是第三方库类型声明文件

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmit": true
  },
  "include": ["vite.config.ts"]
}

sveltekit项目结构

my-sveltekit-app/
├── src/                # 源代码
│   ├── routes/         # 路由文件
│   │   └── +page.svelte # 默认首页文件
│   └── app.html        # 主 HTML 模板
├── static/             # 静态文件
├── svelte.config.js    # SvelteKit 配置文件
├── package.json        # 依赖和项目元数据
├── tsconfig.json       # TypeScript 配置文件（如果启用了 TypeScript）
└── node_modules/       # 项目依赖

{{userData.name}}已认证

项目构建

创建SvelteKit 项目

使用基础

SSR应用

缺点

常用语法

双向绑定

复选

点击事件

组件

插槽

父传子

子传父

上下传参

渲染html

事件

响应性

对象数据处理

条件渲染

列表渲染

await模板

生命周期

程序入口

SvelteKit 项目

安装sveltejs/kit 改成 SvelteKit项目

目录结构

新版 app.svelte

新版 index.html

tsconfig.json 描述

tsconfig.node.json

sveltekit项目结构

npm

DOM与BOM

{{userData.name}}已认证

项目构建

创建SvelteKit 项目

使用基础

SSR应用

缺点

常用语法

双向绑定

复选

点击事件

组件

插槽

父传子

子传父

上下传参

渲染html

事件

响应性

对象 数据处理

条件渲染

列表渲染

await模板

生命周期

程序入口

SvelteKit 项目

安装sveltejs/kit 改成 SvelteKit项目

目录结构

新版 app.svelte

新版 index.html

tsconfig.json 描述

tsconfig.node.json

sveltekit项目结构

npm

DOM与BOM

对象数据处理