Svelte项目搭建
Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。
文章目录
一、Svelte搭建的两种方式
1）使用vite方式构建
npm create vite@latest
2）官网方式搭建：
npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
可能会遇到的报错的情形:
（1）npm install 时
（2）npm run dev 后
上述问题都是因为node 版本过低 , svelte需要16+ 以上 。 如果不想切换node版本 自行找到svelte支持node 14 版本。
二、使用步骤
1、声明变量
<div>
news 组件
{
name } //使用 { 变量名 }
</div>
<script>
let name = '小米南瓜' // 定义变量
</script>
2.动态属性
<script>
let src = 'tutorial/image.gif';
let name = 'Rick Astley';
</script>
<img {
src} alt="{name} dances.">
3.嵌套组件
<script>
import Nested from './Nested.svelte'; // 引入组件
</script>
<Nested /> // 使用组件
<style>
</style>
4.字符串中使用html标签
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{
string}</p>
5.定义事件函数 反应式声明
<div>
<button on:click={
handleClick}>
{
count}
</button>
</div>
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
6.反应式声明
<script>
let count = 0;
$: doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={
handleClick}>
Clicked {
count} {
count === 1 ? 'time' : 'times'}
</button>
<p>{
count} doubled is {
doubled}</p>
看来其有点陌生，不过别担心。上述是 （非常规）的 JavaScript 语句，Svelte 会将其解释为 “只要参考值变化了就重新运行此代码”。一旦看习惯了，你就再也戒不掉了。
当然，你可以在 HTML 标签内书写 {count * 2}，而不必非得使用反应式声明的语法。但是，当你需要多次引用它们时，或者你需要的值依赖于 其它 响应式声明所计算的来的值时，响应式声明就变得特别有用。
不用以下写法：
<script>
let count = 0;
let doubled = 0;
function handleClick() {
doubled = count * 2;
count += 1;
}
</script>
<button on:click={
handleClick}>
Clicked {
count} {
count === 1 ? 'time' : 'times'}
</button>
<p>{
count} doubled is {
doubled}</p>
7.反应式语句
不仅提供了声明反应式的 值，我们还可以运行反应式的 语句。例如，当 count 的值改变时就输出到日志中：
$: console.log(`the count is ${
count}`);
你可以轻松地将一组语句组合成一个代码块：
$: {
console.log(`the count is ${
count}`);
alert(`I SAID THE COUNT IS ${
count}`);
}
你甚至可以将 $: 放在= if 代码块前面：
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
<script>
let count = 0;
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
function handleClick() {
count += 1;
}
</script>
<button on:click={
handleClick}>
Clicked {
count} {
count === 1 ? 'time' : 'times'}
</button>