Svelte安装使用篇

什么是 Svelte？

Svelte 是一个构建 web 应用程序的工具。

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。

但是有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。

你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。

svelte特点

1.更少的代码，编译时将源代码编译成无框架的、更小的执行代码。
2.没有虚拟DOM，不再需要通过虚拟DOM对比差异去优化更新Dom操作。
3.更简单的响应式编程。

安装

• 保证有nodejs环境
  我的环境刚开始是v8.17.0，使用demo运行的时候会报错，换成v12.18.2没有报错。

报错信息：

> rollup -c -w

/Volumes/mydisk/2020/2020code/svelte3demo/my-svelte-project/node_modules/rollup/dist/shared/loadConfigFile.js:480
        ? (await import(url.pathToFileURL(fileName).href)).default
                 ^^^^^^

SyntaxError: Unexpected token import

• 开始创建项目

$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project
$ npm install
$ npm run dev

运行成功后控制台会显示：

  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

启动效果图

image.png

目录结构

./.gitignore
./package-lock.json
./package.json
./public/build/bundle.css
./public/build/bundle.css.map
./public/build/bundle.js
./public/build/bundle.js.map
./public/favicon.png
./public/global.css
./public/index.html
./README.md
./rollup.config.js
./scripts/setupTypeScript.js
./src/App.svelte
./src/main.js

• src/main.js

import App from './App.svelte';

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

export default app;

• src/App.svelte

<script>
    export let name;
</script>

<main>
    <h1>Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

其中我们可以看到name是一个变量，进行了赋值。

我们去掉杂七杂八的代码，加载动图，效果如下：这里因为截取的是静态图，实际图片是会动的。

image.png

好了，今天就先学习到这里了。