svelte 入门到精通

npm create svelte@latest my-svelte-project
# 或者使用 yarn:
yarn create svelte my-svelte-project
 
npx sv create 
# 拉取项目文件
npm run dev 
# 运行项目
 

基础入门

svelte中文文档

melt UI库

floating-ui浮动UI库

一些笔记

路由传参数

-------------------
<!-- 普通链接 -->
<a href="/blog/svelte-is-awesome">查看文章</a>
 
<script>
  import { goto } from '$app/navigation';
  
  function navigate() {
    goto('/blog/sveltekit-routing-guide');
  }
</script>
 
<!-- 读取 -->
<script>
	import { page } from '$app/state';
	let id = page.params.id; // 直接获取参数值
	console.log( id );
</script>
 
-------------------
<!-- 直接拼接 URL -->
<a href="/search?query=svelte&page=2">搜索</a>
 
<script>
  import { goto } from '$app/navigation';
  
  function search() {
    goto('/search?query=advanced&sort=date');
  }
</script>
 
<!-- 读取 -->
<script>
	import { page } from '$app/state';
 
	const searchParams = page.url.searchParams;
	const paramObj = {};
	for (const [key, value] of searchParams) {
		paramObj[key] = value;
	}
	console.log(paramObj);
</script>