svelte 入门

2021-08-22 约 421 字预计阅读 1 分钟次阅读

degit

简介

degit 是一个简单的利用了 github 的项目脚手架工具，degit 做的事很简单，复制 git 仓库代码。

安装

yarn global add degit
# or
npm install -g degit

使用

npx degit user/repo

# these commands are equivalent
degit github:user/repo
degit git@github.com:user/repo
degit https://github.com/user/repo

degit user/repo my-new-project

新建项目

直接从 svelte 模板仓库 clone 下来就可以了。

degit sveltejs/template my-svelte-app

快速入门

下文假设读者有一定 vue 或 react 一类前端框架使用经验。

模板

svelte 的文件后缀就是 .svelte，其本质就是一个 HTML 文件，其中包含js，css，模板三个部分。

<script>
  // javascript here
  let name = 'svelte'
</script>

<style>
  /* styles goes here */
  p {
    font-size: 2em;
  }
</style>

<!-- and template below  -->
<p>hello, { name }</p>

属性

就像可以使用花括号控制文本一样，也可以使用花括号控制元素属性。

<img src={imgSrc}>

速记属性

变量名称与属性名称相同时，比如 src={src}，可以使用 svelte 提供的速记属性语法糖：

<img {src} alt="logo">

样式

在 .svelte 文件中定义的样式只在当前组件生效。即便是当前组件被 import 到其他组件中充当子组件也不会受到影响。

组件

<!-- Logo.svelte -->
<img src="/logo.png" />

<!-- App.svelte -->
<script>
  import Logo from './Logo.svelte'
</script>

<Logo />

原始 HTML

当变量中有敏感字符时（例如 < 和 >），svelte会将其转义以避免 XSS，如果要输出 HTML 可以使用 {@html ...} 实现。

<script>
  let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

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

目录