Giới Thiệu Về Svelte
Svelte là một thư viện JavaScript hiện đại được sử dụng để xây dựng các ứng dụng web tương tác. Không như các framework truyền thống như React hay Vue, Svelte hoạt động dựa trên cách tiếp cận "compile-time". Mã nguồn của bạn sẽ được biên dịch thành JavaScript hiệu quả trong quá trình xây dựng, giúp tăng hiệu suất và giảm bớt gánh nặng cho trình duyệt.
Tại Sao Nên Sử Dụng Svelte?
Hiệu Suất Cao
Svelte biên dịch mã nguồn thành JavaScript vanila, giúp ứng dụng của bạn chạy nhanh hơn và tải nhanh hơn so với các ứng dụng sử dụng framework khác.
Dễ Học
Svelte rất dễ học và sử dụng, đặc biệt đối với những người mới bắt đầu. Cú pháp đơn giản và dễ hiểu, không yêu cầu phải có nhiều kinh nghiệm.
Ít Mã Nguồn Hơn
Nhờ vào việc biên dịch mã nguồn, dung lượng mã JavaScript được tạo ra nhỏ hơn rất nhiều so với các framework khác, giúp giảm thời gian tải trang.
Chuẩn Bị Môi Trường
Cài Đặt Node.js và npm
Trước khi bạn bắt đầu với Svelte, bạn cần phải đảm bảo rằng máy tính của bạn đã cài đặt Node.js và npm. Bạn có thể tải về và cài đặt từ trang web chính thức của Node.js tại đây.
Kiểm Tra Phiên Bản Node.js và npm
Để kiểm tra phiên bản Node.js và npm đã cài đặt, bạn có thể sử dụng các lệnh sau:
node -v
npm -v
Cả hai lệnh này sẽ trả về phiên bản hiện tại của Node.js và npm trên hệ thống của bạn.
Cài Đặt Svelte
Cách 1: Sử Dụng Svelte Template
Bước đầu tiên và đơn giản nhất để bắt đầu với Svelte là sử dụng template mặc định của Svelte.
Bước 1: Tạo Dự Án Mới với Svelte Template
Mở terminal và chạy lệnh sau để tạo một dự án mới với template của Svelte:
npx degit sveltejs/template my-svelte-project
Lệnh này sẽ tải và sao chép mẫu dự án Svelte vào thư mục "my-svelte-project".
Bước 2: Cài Đặt Các Phụ Thuộc
Điều hướng đến thư mục dự án mới của bạn và cài đặt các phụ thuộc bằng cách sử dụng lệnh:
cd my-svelte-project
npm install
Bước 3: Khởi Động Dự Án
Sau khi cài đặt xong các phụ thuộc, bạn có thể khởi động ứng dụng bằng cách sử dụng lệnh:
npm run dev
Mở trình duyệt và truy cập địa chỉ http://localhost:5000 để xem ứng dụng Svelte của bạn.
Cách 2: Cấu Hình Svelte Thủ Công Trong Dự Án Của Bạn
Nếu bạn muốn cấu hình Svelte trong một dự án JavaScript hiện có, bạn có thể làm theo các bước sau.
Bước 1: Khởi Tạo Dự Án Node.js
Nếu chưa có dự án Node.js, bạn có thể tạo một dự án mới bằng cách sử dụng lệnh:
mkdir my-svelte-project
cd my-svelte-project
npm init -y
Bước 2: Cài Đặt Các Phụ Thuộc Cần Thiết
Cài đặt các phụ thuộc cần thiết cho Svelte và các công cụ build như rollup:
npm install svelte rollup rollup-plugin-svelte rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev
Bước 3: Cấu Hình Rollup
Tạo một tệp mới có tên rollup.config.js trong thư mục dự án và thêm cấu hình sau:
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/main.js',
output: {
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte(),
resolve({ browser: true }),
commonjs(),
terser()
]
};
Bước 4: Tạo Cấu Trúc Thư Mục Dự Án
Tạo các thư mục và tệp cần thiết cho dự án:
mkdir -p src public
touch src/main.js public/index.html
Bước 5: Thêm Mã Giao Diện Cần Thiết
Mở tệp public/index.html và thêm mã HTML cơ bản:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Svelte App</title>
</head>
<body>
<div id="app"></div>
<script src="build/bundle.js"></script>
</body>
</html>
Tiếp theo, mở tệp src/main.js và thêm mã JavaScript để khởi động ứng dụng Svelte:
import App from './App.svelte';
const app = new App({
target: document.getElementById('app')
});
export default app;
Tạo một tệp mới có tên src/App.svelte và thêm mã Svelte cơ bản:
<script>
let name = 'world';
</script>
<main>
<h1>Hello {name}!</h1>
</main>
<style>
main {
text-align: center;
padding: 1em;
}
h1 {
color: #ff3e00;
}
</style>
Bước 6: Thêm Scripts Vào package.json
Cuối cùng, mở tệp package.json và thêm các script để xây dựng và chạy dự án:
"scripts": {
"build": "rollup -c"
}
Bước 7: Xây Dựng và Chạy Dự Án
Chạy lệnh sau để xây dựng dự án:
npm run build
Sau đó, bạn có thể mở tệp public/index.html trong trình duyệt để xem ứng dụng của bạn.
Xây Dựng Ứng Dụng Đầu Tiên Với Svelte
Tạo Một Component Cơ Bản
Với Svelte, bạn có thể tạo các component một cách dễ dàng. Tạo một tệp mới có tên src/MyComponent.svelte và thêm mã sau:
<script>
export let name;
</script>
<div>
Hello {name}!
</div>
<style>
div {
font-weight: bold;
color: green;
}
</style>
Sử Dụng Component
Mở tệp src/App.svelte và sử dụng component vừa tạo:
<script>
import MyComponent from './MyComponent.svelte';
</script>
<main>
<h1>Welcome to My Svelte App!</h1>
<MyComponent name="Svelte Developer" />
</main>
<style>
main {
text-align: center;
padding: 1em;
}
h1 {
color: #ff3e00;
}
</style>
Svelte sẽ biên dịch mã nguồn của bạn thành JavaScript hiệu quả và gọn nhẹ.
Kết Luận
Qua bài viết này, bạn đã biết cách cài đặt Svelte trong JavaScript và làm thế nào để xây dựng một ứng dụng cơ bản. Svelte không chỉ mang lại hiệu suất cao mà còn dễ học và sử dụng, là một lựa chọn tuyệt vời cho cả các dự án lớn và nhỏ. Hãy bắt đầu khám phá Svelte ngay hôm nay và tận dụng những ưu điểm mà nó mang lại!
Comments