Svelte入门-编写图书管理系统教程

一、什么是 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 {
 ...

点击查看剩余70%