SvelteKit【学习笔记】

内容介绍

• 记录一下跟着油管主net NinJa学习SvelteKit的过程
• 该demo是多个页面调转和重定向已经获取api数据的项目
• 将构建的demo通过vercel免费部署到网站上

---

demo最终实现效果

• 首页

• About页面

• Guide页面

• Guide/id页面

• 预览效果：sveltekit-stidy

Svelte学习资源

• 官方文档：https://www.sveltejs.cn/

• net NinJa学习视频：youtube

• 本demo代码：https://github.com/ddy-ddy/sveltekit-study

---

dem构建过程

1、使用脚手架工具degit setting up a svelte app

'''
#-g means installing this package globally on my compute so we can use it anywhere in any directory
'''
npm install -g degit    #install degit with npm
degit sveltejs/template svelte-demo-ddypoll   #create a project by degit
npm install #install dependency package with npm
npm run dev  #spin up a local development server to preview our project

2、跟着YouTube的视频不断添加新功能，每一个版本在我的github都有存档，这里就简单罗列每个版本添加的功能

v1：Know something about pages and routes

v2：Add Reusable Component, Layout Component and Rset layout Component

v3: Learning loading data $ SSR & client-side vs server-side

V4: Dynamic Routes & Redirects

v5: Perfecting Data & Error page

V6: API routes

---

3、将app部署到surge上

#安装surge
npm install --global surge
#build project
npm run build
#deploy to website
surge public my-project-name.surge.sh

4、将app部署到vercel上

直接到vercel官网链接自己的github库即可部署到网站上