Create Svelte Project

Create Project

npm create svelte@latest <project_name>

Example:

安裝套件管理工具

npm install

把 dev 中的專案 run 起來

npm run dev

剛 create 的 project run 起來會長這樣 Imgur

Project 結構介紹

.
│  .gitignore
│  .npmrc
│  package-lock.json
│  package.json
│  README.md
│  svelte.config.js
│  tsconfig.json
│  vite.config.ts 
│
├─src
│  │  app.d.ts
│  │  app.html
│  │
│  ├─lib
│  │  └─images
│  │          github.svg
│  │          svelte-logo.svg
│  │          svelte-welcome.png
│  │          svelte-welcome.webp
│  │
│  └─routes
│      │  +layout.svelte
│      │  +page.svelte
│      │  +page.ts
│      │  Counter.svelte
│      │  Header.svelte
│      │  styles.css
│      │
│      ├─about
│      │      +page.svelte
│      │      +page.ts
│      │
│      └─sverdle
│          │  +page.server.ts
│          │  +page.svelte
│          │  game.ts
│          │  reduced-motion.ts
│          │  words.server.ts
│          │
│          └─how-to-play
│                  +page.svelte
│                  +page.ts
│
└─static
        favicon.png
        robots.txt

參考網站

SvelteKit