npx degit mzaini30/svelte my-project
cd my-project
npm i
| Keterangan | Folder |
|---|---|
| File Svelte | src/pages |
| Static files | public/dist |
| Output | public |
Menggunakan Bootstrap
Cukup jalankan
npm run build
Kita menggunakan Routify.
Dia nggak mereset state saat kita development. Cukup jalankan:
npm run dev
Ini isi dari public/index.html:
<!--
Website ini dibuat oleh Zen
duniazen.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte Template</title>
<meta name="description" content="Template Svelte yang diolah oleh Zen">
<meta property="og:image" content="/dist/jean.jpg">
<link rel='icon' type='image/png' href='/dist/ungu.png'>
<link rel='stylesheet' href='/dist/bootstrap/css/bootstrap.min.css'>
<link rel='stylesheet' href='/bundle.css'>
<link rel='stylesheet' href='/dist/global.css'>
<script defer src='/main.js' type="module"></script>
</head>
<body>
</body>
</html>
Nanti tinggal disesuaikan aja tag title, meta description, dan og image.
Cara menggunakan:
import {isLoading} from '@/store'
$isLoading = true // untuk mengaktifkan loader
$isLoading = false // untuk mematikan loader
Itu harus diletakkan di dalam folder halaman.
Contoh:
import {nama} from '@/data/nama'
Tapi, bisa juga relative path seperti:
import {nama} from '../../../nama'
Mendapatkan tanggal terkini dengan format 2020-08-17 00:19:45
Caranya:
<script>
import {tanggal} from '@/tools'
</script>
<p>{tanggal()}</p>
Mendapatkan slug dari string
Caranya:
<script>
import {slug} from '@/tools'
</script>
<p>{slug('hello world')}</p>
<!-- jadinya: hello-world -->
Digunakan untuk mengacak array
Caranya:
import {acak} from "@/tools"
let angka = [1, 2, 3, 4, 5]
angka = acak(angka)
Boleh. Misalnya aja mau nerjemahkan ke bahasa Jepang, maka buat file README-jp.md yang berisi terjemahan README ini dalam bahasa Jepang.