likes
comments
collection
share

Svelte小试——Svelte+Vite+TypeScript实现ToDoList

作者站长头像
站长
· 阅读数 13

@Svelte小试——Svelte+Vite+TypeScript实现ToDoList

create by db on 2023-2-24 13:39:42 Recently revised in 2023-2-24 18:39:42

闲时要有吃紧的心思，忙时要有悠闲的趣味

前言

Svelte 简介

让项目轻便！

 Svelte 是一个构建 web 应用程序的工具。他是一个前端框架，作者是 Rich Harris ，你可能对这个人字不太熟悉，但 rollup 肯定听过，同一个作者。其优势如下：

  • 用最基本的 HTML,CSS,Javascript 来写代码
  • 直接编译成原生 JS，没有中间商（Virtual DOM) 赚差价
  • 没有复杂的状态管理机制

 总的来说，就是非常易上手。

Vite 简介

让项目更快！

 Vite 不用更多介绍了，现在已更新到了第3版，他的优势就是

  • 快速的冷启动，不需要等待打包操作；
  • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
  • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

 Vite目前支持的模板预设如下：

JavaScriptTypeScript
vanillavanilla-ts
vuevue-ts
reactreact-ts
preactpreact-ts
litlit-ts
sveltesvelte-ts

 所以我们可以直接使用Vite构建我们的svelte项目。

 参考文档：

正文

Vite + Svelte 搭建项目

1、通过 Vite 创建一个 Svelte 项目

 进入你需要创建项目的文件夹，打开命令行。

输入以下命令，回车

npm create vite@latest

 然後看到

? Project name: » vite-project

 需要输入项目名称，我们输入vite-svelte-todolist当然，使用默认也可以，然后回车

 此处可以选择支持的模板，包括：

? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

 可以使用上下方向键来切换选项。使用Enter来确定 Svelte模板，

 此处可以选择支持的语言，包括：

? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript
    SvelteKit ↗

 可以选你喜欢的语言就完事了，，我这里选TypeScript, 等待初始化项目。

 最后出现如下代码

Done. Now run:
  cd vite-svelte-todolist
  npm install
  npm run dev

 说明已经初始化成功，项目搭建完成。

2、进入你的项目文件夹

 项目搭建好了，现在就可以进入项目文件夹。

输入以下命令，回车进入新建的项目。

cd vite-svelte-todolist

3、安装依赖

 因为各个模板之间都是相互依赖的，所以现在我们要安装依赖。

输入以下命令，回车安装依赖

npm install

4、启动项目

 一切环境依赖安装准备就绪，我们来测试一下自己新建的项目的运行情况。

输入以下命令，回车启动项目

npm run dev

结果会弹出一个浏览器访问地址默认为localhost:3000，如下：

VITE v4.1.4  ready in 743 ms
> Local:    http://localhost:3000/

 在浏览器中打开http://localhost:3000或者 Network 的地址，就能看到你的项目了

Svelte小试——Svelte+Vite+TypeScript实现ToDoList

 至此，一个由 Vite 构建的 svelte 项目就搭建好了。

项目目录

|-node_modules        -- 项目依赖包的目录
|-public              -- 项目公用文件
  |--vite.svg     -- 网站地址栏前面的小图标
|-src                 -- 源文件目录，程序员主要工作的地方
  |-assets            -- 静态文件目录，图片图标，比如网站logo
  |-lib               -- 自定义组件目录
  |--App.svelte       -- 项目的根组件，单页应用都需要的
  |--app.css        -- 一般项目的通用CSS样式写在这里，main.ts引入
  |--main.ts          -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore         -- git的管理配置文件，设置那些目录或文件不管理
|-- index.html        -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误
|-- package.json      -- 项目配置文件，包管理、项目名称、版本和命令
|-- tsconfig.json     -- TypeScript配置文件，主要包含指定待编译文件和定义编译选项。
|-- vite.config.ts    -- vite总配置文件

  基本上跟Vue项目的目录结构差不多，只是文件后缀改成了.svelte。

 至此，我们的 svelte 项目就搭建完成了。

主要文件介绍

 在这个 ToDoList 当中，涉及到知识点包括以下内容:

入口文件 -- main.js

 我们首先看下 main.js文件， 里引入了 src/App.svelte 组件，并使用以下代码将 src/App.svelte 的内容渲染到 #app 元素里。

import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

根组件 -- App.svelte

 App.svelte是我们项目的根组件，所有的组件都是挂载到他里面运行的。

<script lang="ts">
  import Counter from "./lib/Counter.svelte";
</script>

<main>
  <Counter />
</main>

<style>
</style>

业务组件 -- lib

 我们主要的工作目录是 lib 目录，大部分业务代码都是写在 .svelte 后缀的文件里。

 .svelte 文件主要保安 多个 HTML 元素、1个 script 元素 和 1个 style 元素 。这3类元素都是可选的。如下：

<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count}
</button>

开始实现 ToDoList

 介绍完 svelte 项目的主要文件，我们就可以开始实现 ToDoList 项目了。

1、创建 ToDoList 组件

 我们可以将项目自带的/lib中的Counter.svelte文件改名为ToDoList.svelte，内容如下

<script lang="ts">
  let title: string = "ToDoList"
</script>

<div>
  <h1>{title}</h1>
</div>

2、引入注册 ToDoList 组件

 在/src中的App.svelte文件中,将原先注册Counter的全改为ToDoList,并且 将传值msg内容改为ToDoList,如下：

<script lang="ts">
  import ToDoList from "./lib/ToDoList.svelte";
</script>

<main>
  <ToDoList />
</main>

 svelte的代码其实和 Vue 有点像。

  • 变量和方法都写在
  • 在 HTML 中使用 {} 可以绑定变量和方法。

 OK，以上两步做完，我们的项目运行起来是这样子的：

Svelte小试——Svelte+Vite+TypeScript实现ToDoList

3、创建并渲染列表

 接下来，我们在script中创建一个数组 items，然后写我们的 html 结构，使用 #each 指令来实现列表的渲染，如下：

<script lang="ts">
  type itemType = {
    id: Number;
    title: String;
  };
  // 标题
  let title: string = "ToDoList";
  // 待办事项列表
  let items: itemType[] = [
    {
      id: 1,
      title: "吃饭",
    },
    {
      id: 2,
      title: "睡觉",
    },
    {
      id: 3,
      title: "打豆豆",
    },
  ];
</script>

<div>
  <!--  标题展示 -->
  <h1>{title}</h1>

  <ul class="ToDoList">
    <!-- 待办事项 -->
    <!-- 可以使用 each 块对值列表进行遍历 -->
    <!-- 为此，我们为 each 块指定一个唯一标识符，作为 key 值： -->
    {#each items as item, i (item.id)}
      <li>
        <span>{i + 1}、{item.title}</span>
        <!-- 完成按钮 -->
        <button>完成</button>
      </li>
      <!-- each 还可以使用 {:else}子句，如果列表为空，则显示{:else} 条件下内容。 -->
    {:else}
      <p>No tasks today!</p>
    {/each}
  </ul>
</div>

 渲染后的结果如下：

Svelte小试——Svelte+Vite+TypeScript实现ToDoList

4、绑定删除事件

 接下来我们使用on:来为按钮绑定事件，目的是点击删除按钮的时候，将列表中相应的选项删除。

  <!-- 完成按钮 -->
  <button on:click={() => deleteItem(i)}>完成</button>

 这里我们增加了click方法，方法名为deleteItem，参数为数组下标index（数字类型）。

 紧接着上面定义的 deleteItem 方法，我们接着在setup中定义deleteItem事件并返回

  // 点击完成按钮，删除对应事项
  let deleteItem = (index: number) => {
    items.splice(index, 1);
    // 这里貌似需要重新赋值，待研究
    items = items
  };

5、使用 input 输入框添加新事项

 截至目前我们使用的都是现成的列表，接下来我们使用输入框来动态为列表添加条目：

  <!-- 新增待办表单 -->
  <div>
    待办：
    <input type="text" bind:value={inputValue} />
    <button on:click={addNewItem}>添加</button>
  </div>

 使用指令bind:value在表单控件或者组件上创建双向绑定，即绑定 inputValue; 使用on:来绑定事件监听器，点击添加按钮会响应事件addNewItem。

addNewItem同样在</script>中编写如下：

// 输入框内容
let inputValue: String = "";
// 自增ID
let itemId: number = 4;
// 添加待办方法
const addNewItem = () => {
  let newItem: itemType = {
    id: itemId,
    title: inputValue,
  };
  items.push(newItem);
  // 这里貌似需要重新赋值，待研究
  items = items;
  // 清空输入框
  inputValue = "";
  // id 自增
  itemId++;
};

 在 </script>中，我们声明一个变量itemId默认为 0，，inputValue为空字符串。输入框输入内容后，点击添加按钮 items 中 push 一条内容，其中包括 id 与 title，然后 id 自增，并且将输入框清空。

总结

 通过以上几个关键的知识点，我们最终就实现了 ToDoList 的基本功能，效果如下：

Svelte小试——Svelte+Vite+TypeScript实现ToDoList

 本文主要讲解了 Svelte 的基础用法，但 Svelte 的内容和 API 远不止此。它还有很多高级的用法,具体可以查看官方文档

 Svelte 是一个 Web 应用的构建工具，它打包出来的项目体积比较小，性能强，不使用虚拟DOM。但 Svelte 的兼容性和周边生态相比起 Vue 和 React 会差一点,适合做些简单项目。所以日常项目中需要根据 Svelte 的优缺点进行取舍。

 路漫漫其修远兮，与诸君共勉。

附 ToDoList.svelte 代码

<script lang="ts">
  type itemType = {
    id: Number;
    title: String;
  };
  // 标题
  let title: string = "ToDoList";
  // 待办事项列表
  let items: itemType[] = [
    {
      id: 1,
      title: "吃饭",
    },
    {
      id: 2,
      title: "睡觉",
    },
    {
      id: 3,
      title: "打豆豆",
    },
  ];
  // 输入框内容
  let inputValue: String = "";
  // 自增ID
  let itemId: number = 4;
  // 添加待办方法
  const addNewItem = () => {
    let newItem: itemType = {
      id: itemId,
      title: inputValue,
    };
    items.push(newItem);
    // 这里貌似需要重新赋值，待研究
    items = items;
    // 清空输入框
    inputValue = "";
    // id 自增
    itemId++;
  };
  // 点击完成按钮，删除对应事项
  let deleteItem = (index: number) => {
    items.splice(index, 1);
    // 这里貌似需要重新赋值，待研究
    items = items;
  };
</script>

<div>
  <!--  标题展示 -->
  <h1>{title}</h1>
  <!-- 新增待办表单 -->
  <div>
    待办：
    <input type="text" bind:value={inputValue} />
    <button on:click={addNewItem}>添加</button>
  </div>
  <!-- 待办事项列表 -->
  <ul class="ToDoList">
    <!-- 可以使用 each 块对值列表进行遍历 -->
    {#each items as item, i (item.id)}
      <li>
        <span>{i + 1}、{item.title}</span>
        <!-- 完成按钮 -->
        <button on:click={() => deleteItem(i)}>完成</button>
      </li>
      <!-- each 还可以使用 {:else}子句，如果列表为空，则显示{:else} 条件下内容。 -->
    {:else}
      <p>No tasks today!</p>
    {/each}
  </ul>
</div>

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。基于github.com/danygitgit上的作品创作。本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。