一、什么是 Svelte？
Svelte 用于构建快速的 Web 应用，月react与vue有不同，他不需要虚拟dom，而是在代码构建的时候直接转换成原生的js代码，这在效率上要比vue和react要快，性能更优。今天我们来一步一步介绍用svelte创建一个图书管理系统，包含增加添加购物车、列表效果。二、Svelte编写一个图书管理系统
创建一svelte项目叫svelte-bookstore
npx degit sveltejs/template svelte-bookstore cd svelte-bookstore npm install npm run dev好了，项目已经运行起来了。
浏览器打开http://localhost:8080/，我们可以看到页面内容了。
我们看看目录
他是使用rollup来进行打包的。
看看main.js
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;它导入了app.svelte文件，然后挂载到body上面显示，那么我们看看app.svelte<script>
export let name;
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>可以看出svelte文件由三部分构成，script及main和style下面我们来写一个图书添加和列表显示的功能
在src目录下创建一个book.svelte文件，代码如下：
<script>
import { createEventDispatcher } from "svelte";
import Button from "./button.svelte";
export let bookTitle;
export let bookPrice;
export let bookDescription;
const dispatch = createEventDispatcher();
function purchaseBook() {
dispatch("buy", bookTitle);
}
</script>
<div>
<h1>{bookTitle}</h1>
<h2>{bookPrice}</h2>
<p>{bookDescription}</p>
<Button on:click={purchaseBook}>Buy</Button>
</div>
<style>
div {
margin: 1rem;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
h2 {
font-size: 1rem;
margin: 0.25rem 0;
font-weight: bold;
}
p {
margin: 0.25rem 0;
}
</style>
1再创建一个button.svelte文件<style>
button{
font : larger;
padding: 0.15rem 0.5rem;
background-color: #1b1a1a;
border: 1px solid aliceblue ;
cursor: pointer;
color: white;
}
</style>
<button on:click >
<slot/>
</button>
1还要创建一个purchase.svelte<script>
export let books;
let initialValue = 0;
$: total = books.reduce(function (accumulator, currentBook) {
return accumulator + currentBook.price;
}, initialValue);
</script>
<h2>购物车</h2>
<ul>
{#each books as book}
<li>{book.title} - {book.price}</li>
{/each}
</ul>
<div class="price">Total Price: {total}</div>
<style>
ul {
list-style: none;
margin: 1rem;
padding: 0;
}
li {
font-size: 1.5rem;
margin: 1rem;
}
.price {
border-top: 1px dashed black;
}
</style>
1最后把他们导入到app.svelte<script>
import Book from './book.svelte'
import Button from './button.svelte'
import Purchase from './purchase.svelte'
let title = '';
let price = 0;
let description = '';
let books =[];
let purchases = [];
function setTitle(event){
title = event.target.value;
}
function addBook(){
const newBook = {
title : title,
price : price,
description: description
};
books = books.concat(newBook)
}
function purchaseBook(event){
const selectedTitle= event.detail;
purchases = purchases.concat({
...books.find(book => book.title === selectedTitle)
});
}
</script>
<style>
h1 {
color: purple;
text-align:center;
}
section{
margin: 1rem auto;
width: 30rem;
}
label,input,textarea{width: 100%}
</style>
<h1>Book Store</h1>
<section>
<h2>添加图书</h2>
<div>
<label for="title">标题</label>
<input type="text" id="title" value={title} on:input={setTitle}/>
</div>
<div>
<label for="price"> 价格</label>
<input type="number" id="price" bind:value={price}/>
</div>
<div>
<label for="description">描述</label>
<textarea rows="3" id="description" bind:value={description}/>
</div>
<Button on:click={addBook}>添加图书</Button>
</section>
<section>
<h2>仓库中</h2>
{#if books.length === 0}
<p>
还没有书本
</p>
{:else}
{#each books as book}
<Book bookTitle={book.title}
bookPrice={book.price}
bookDescription={book.description}
on:buy={purchaseBook}
/>
{/each}
{/if}
</section>
<section>
<Purchase books ={purchases} />
</section>
1我们看看浏览器，已经运行起来了
我们来添加一下试试
我们点buy添加购物车试试
购物车总价格也在实时变动
我们打包出来看看代码
执行npm run build
好了，public目录下有这些文件；
再看看build目录
已经生成了压缩的原生js代码及map文件，把它放到服务器上就能运行了。
{{collectdata}}
网友评论0