Svelte项目 - 图片来自我的手机

今天的越写悦快乐之系列文章为大家带来如何快速开启一个Svelte项目，如何利用HTML、JavaScript和CSS构建Web应用。话说当下流行的Web开源的JavaScript框架当属React、Vue.js和Angular，那么除了这三款框架外，我们别无选择了吗？今天为大家介绍这款框架Svelte，就是其中很有名气的一员，我相信通过的介绍，你会有兴趣进一步了解它，让我们开始探索之旅吧。

介绍

它是什么

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

Svelte是一款构建Web应用的新方式，通过它可以将声明式组件高效地编译成JavaScript，并且如外科手术般地更新DOM。

它有什么特点

减少代码量
无需操作虚拟DOM
无需使用状态管理

如何使用

环境要求

Node 8.0
JavaScript 或者TypeScript
VSCode

开启一个新项目

创建项目

我们打开iterm2软件，然后定位到Desktop目录下，执行如下命令：

npx degit sveltejs/template svelte-go

执行完成后切换到svelte-go并使用VSCode打开项目：

cd svelte-go
code -r .

切换编程语言

打开项目后，我们注意到项目的结果如下：

项目结构 - 图片来自我的手机

切换到VSCode的终端页签下，执行以下命令：

node scripts/setupTypeScript.js

执行完成后会自动删除scripts目录。

来个满天星玩玩

打开App.svelte文件，输入以下内容：





{#each confetti as c}
    {c.character}
{/each}

随后在main.ts文件中加载App.svelte文件并绑定组件，文件内容如下：

import App from "./App.svelte";

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

export default app;

配置文件

我们打开项目的package.json文件看看，就知道这个项目依赖哪些第三方库了，文件内容如下：

{
  "name": "svelte-app",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "validate": "svelte-check"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^1.0.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "typescript": "^3.9.3",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^1.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

看看效果

在项目的终端执行以下命令即可查看项目运行结果：

npm run start

运行结果

如果您阅读过Svelte的官方教程，或许对这一结果不意外，我相信您能静下心来阅读官方的教程，这样有助于你进一步理解Svelte是怎么工作的。

参考

Svelte

Gif制作工具

QuickTime Player
Gifski

个人总结及收获

我们的这篇文章入门了如何使用Svelte构建可交互基于组件的页面，该页面增强了HTML的内容表达的能力，更让我们可以借助JavaScript或者TypeScript来提升我们的开发体验，构建更加友好卓越的用户体验，提升用户的产品价值，我相信技术带来生产的变革，让我们一起构建无与伦比的用户体验，创造更大的价值。若是我的文章对你有所启发，那将是我莫大的荣幸。希望和您一起精进，成为更好的自己。

越写悦快乐之如何快速开启一个Svelte项目

介绍