Svelte + Vite 知识点一

SVELTE + VITE (一)

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。

搭建项目

npm init vite

选择 svelte-ts 模板

初始化后目录结构如下

• svelte 的构建工具，官方提供了针对 Rollup 和 webpack 的插件
  • rollup-plugin-svelte
  • svelte-loader
• 这里使用基于rollup 打包原理 的 Vite 工具。

SVELTE特点

• 减少代码量
• 无虚拟DOM
• 真正的反应能力

测试初始化项目打包体积：

• 图中可以看出 js gzip 后 3kb

打包体积：

针对初始化项目进行打包：

简介

添加数据

<script>
let name = 'world'
</script>
<h1>
    Hello {name} !
</h1>

• 花括号内，可以防止任何想要的JavaScript代码

动态属性

<img {src} alt/>  
<!-- 
or <img src={src} alt=""/>
-->

• 可以在属性内部使用花括号

CSS样式

<style>
    p{ color:red }
</style>
<p>
    This is a ...
</p>

• 这些 CSS样式的规则的作用域 被限定在当前组件。

嵌套组件

<script>
import Nested from './Nested.svelte';
</script>

<Nested />
<!-- <Nested ></Nested>  -->

• 组件名称Nested的首字母大写。 采用此约定使我们能够区分用户自定义组件 和 一般HTML标签

HTML 标签

<p> {@html string} </p>

• 将表达式的输入插入到DOM之前，Svelte不会对 {@html ...}内的表达式的输出做任何清理的。换言之，如果使用此功能，必须手动转义来自不信任源的HTML 代码，预防XSS攻击。

创建一个应用程序

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		answer: 42
	}
});

赋值

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

（...待续）