探秘 Svelte+Vite+TS+Melt - UI 框架搭建，开启高效开发

框架太“重”了：通常一个小型项目只由少数几个简单页面构成，如果使用 Vue 或者 React 这些框架来研发的话，有点“大材小用”了。构建的产物中包含了不少框架运行时代码(虚拟 DOM、响应式、状态管理等)，这些代码对于小型项目而言是冗余的，它们影响了包体大小，进而影响页面的启动速度和执行性能。
打包太慢了：以 Vue CLI 为例，它的底层基于 Webpack，虽然 Webpack 具备更强大的功能和灵活性，但相比于 Vite、Esbuild 这些以速度为标杆的构建工具来说，它的速度确实慢了一些，影响了研发效率。

文章目录

- 一、创建基本项目
- - 1.1 全局安装 Vite
  - 1.2 创建 Svelte 项目
- 二、目录结构
- 三、svelte路由配置
- - 3.1 npm安装
  - 3.2 定义router
  - - 3.2.1 动态导入组件
    - 3.2.2 在页面之间导航
  - 3.3 使用路由
- 四、svelte CSS预处理器
- - 4.1 less的使用
  - - 4.1.1 npm安装
  - 4.2 Tailwind CSS的使用
- 五、svelte环境变量配置
- - 5.1 环境变量命名规则
  - 5.2 .env文件的使用
  - 5.3 在代码中使用环境变量
  - 5.4 配置运行与打包环境
- 六、svelte国际化
- - 6.1 安装 `svelte-i18n`
  - 6.2 初始化 `svelte-i18n`
  - 6.3 创建语言文件
  - 6.4 在 Svelte 组件中使用 `svelte-i18n`
  - 6.5 切换语言
  - 6.6 在 `App.svelte` 中引入 `i18n.js`
  - 6.7 运行项目
  - 6.8 构建项目
  - 6.9 预览项目
  - 6.10 检查项目
- 七、svelte接口请求
- - 7.1 安装 `axios`
  - 7.2 创建 `axios` 实例
  - 7.3 在 Svelte 组件中使用 `axios`
  - 7.4 处理请求和响应拦截器
  - 7.5 在 `App.svelte` 中使用 `axios`
  - 7.6 处理错误
- 八、svelte组件库
- 九、svelte阿里图标库
- - 9.1 获取阿里图标
  - 9.2 将图标文件放入项目
  - 9.3 引入图标文件
  - 9.4 使用图标
  - 9.5 动态切换图标
  - 9.6 使用 Symbol 方式（可选）
  - 9.7 样式调整（可选）
  - 9.8 示例代码
- 十、svelte轮播图
- 十一、store数据共享
- - 1. 创建 `store` 模块
  - 2. 创建全局 `store`
  - 3. 在组件中使用 `store`
  - 4. 封装 `store` 的优势
  - 5. 示例：`about.svelte` 中使用 `store`
- 十二、扩展内容
- 十三、框架git地址

一、创建基本项目

1.1 全局安装 Vite

通过 npm 全局安装 Vite

npm install vite

1.2 创建 Svelte 项目

Vite 原生支持直接通过脚手架创建 Svelte 项目，执行以下命令

npm create vite@latest

输入命令后选择如下

✔ Project name: vite-svelte

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
❯   Svelte
    Solid
    Qwik
    Others

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   JavaScript
    SvelteKit

基本项目创建完成

二、目录结构

根据上一步创建项目，项目的基本结构栓是完成了，但这样还是不够的，接下来介绍一下完整的项目目录
在这里插入图片描述

三、svelte路由配置

3.1 npm安装

项目中安装svelte-spa-router

npm install svelte-spa-router

3.2 定义router

每条路由都是一个普通的Svelte组件，包含标记、脚本、绑定等。任何Svelte组件都可以是路由。
路由定义只是一个JavaScript字典（对象），其中键是一个带有路径（包括参数等）的字符串，值是路由对象。

import Home from './routes/Home.svelte'
import Author from './routes/Author.svelte'
import Book from './routes/Book.svelte'
import NotFound from './routes/NotFound.svelte'

const routes = {
    // Exact path
    '/': Home,

    // Using named parameters, with last being optional
    '/author/:first/:last?': Author,

    // Wildcard parameter
    '/book/*': Book,

    // Catch-all
    // This is optional, but if present it must be the last
    '*': NotFound,
}

3.2.1 动态导入组件

使用动态导入的优点是，如果您的打包器支持，您可以启用代码拆分并减小发送给用户的捆绑包的大小。这已经用包括Rollup和Webpack在内的捆绑器进行了测试

要使用动态导入的组件，您需要利用包装方法（根据路线包装文档，该方法可用于各种操作）。首先，导入wrap方法：

import {wrap} from 'svelte-spa-router/wrap'

然后，在路由定义中，使用wrap方法包装路由，将一个函数传递给asyncComponent属性，该函数将动态导入的组件返回给asyncComponent：

wrap({
    asyncComponent: () => import('./Foo.svelte')
})

案例：

// Import the wrap method
import {wrap} from 'svelte-spa-router/wrap'

// Note that Author and Book are not imported here anymore, so they can be imported at runtime
import Home from './routes/Home.svelte'
import NotFound from './routes/NotFound.svelte'

const routes = {
    '/': Home,

    // Wrapping the Author component
    '/author/:first/:last?': wrap({
        asyncComponent: () => import('./routes/Author.svelte')
    }),

    // Wrapping the Book component
    '/book/*': wrap({
        asyncComponent: () => import('./routes/Book.svelte')
    }),

    // Catch-all route last
    '*': NotFound,
}

3.2.2 在页面之间导航

锚点导航

<a href="#/book/123">Thus Spoke Zarathustra</a>

use:link导航（可以使用use：link操作，而不必在每个链接前键入#）

<script>
import {link} from 'svelte-spa-router'
</script>
<a href="/book/321" use:link>The Little Prince</a>

3.3 使用路由

在app.svelte中全局调用

import Router from 'svelte-spa-router'

然后，通过将组件放置在标记中，将路由器显示在您想要的任何位置

<body>
    <Router {routes}/>
</body>

四、svelte CSS预处理器

4.1 less的使用

4.1.1 npm安装

安装less与svelte-preprocess-less依赖

npm install --save-dev svelte-preprocess-less less

在vite.config.js进行配置

import { less } from 'svelte-preprocess-less'
export default defineConfig({
    plugins: [svelte({
        preprocess: {
          style: less(),
        },
      })],
})

4.2 Tailwind CSS的使用

通过npx安装直接配置完 tailwindcss

npx sv add tailwindcss

五、svelte环境变量配置

‌Vite中使用环境变量主要通过.env文件来配置，这些文件根据不同的环境（开发、测试、生产等）有不同的命名规则和使用方式。

5.1 环境变量命名规则

所有环境变量必须以VITE_为前缀

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vite App

5.2 .env文件的使用

1‌. 通用环境变量‌：在项目的根目录下创建.env文件，用于定义所有环境通用的变量。
2‌. 特定环境变量‌：根据不同的环境需求，可以创建以下类型的.env文件：
.env.devt：仅在开发环境中使用。
.env.pro：仅在生产环境中使用。
.env.local：通用的本地配置文件，通常不提交到版本控制系统中。
.env.development.local：开发环境的本地配置文件。
.env.production.local：生产环境的本地配置文件‌

5.3 在代码中使用环境变量

console.log(import.meta.env.VITE_API_URL);

5.4 配置运行与打包环境

  "scripts": {
    "dev": "vite --mode dev",//运行dev环境
    "dev-pro": "vite --mode pro",//运行pro环境
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
  },

六、svelte国际化

svelte-i18n 是一个用于 Svelte 应用的国际化（i18n）库，它可以帮助你轻松地管理和切换应用中的多语言内容。以下是如何在 Svelte 项目中使用 svelte-i18n 的基本步骤：

6.1 安装 `svelte-i18n`

首先，确保你已经安装了 svelte-i18n。根据你的 package.json 文件，它已经存在于 dependencies 中。

npm install svelte-i18n

6.2 初始化 `svelte-i18n`

在你的 Svelte 项目中，通常会在 src 目录下创建一个 i18n.js 或 i18n.ts 文件来初始化 svelte-i18n。

// src/i18n.js
import { init, register, locale } from 'svelte-i18n';

// 注册默认语言
register('en', () => import('./locales/en.json'));
register('zh', () => import('./locales/zh.json'));

// 初始化并设置默认语言
init({
  fallbackLocale: 'en',
  initialLocale: 'en',
});

6.3 创建语言文件

在 src/locales 目录下创建语言文件，例如 en.json 和 zh.json。

// src/locales/en.json
{
  "welcome": "Welcome to Svelte App",
  "greeting": "Hello, {name}!"
}

// src/locales/zh.json
{
  "welcome": "欢迎使用 Svelte 应用",
  "greeting": "你好, {name}!"
}

6.4 在 Svelte 组件中使用 `svelte-i18n`

你可以在 Svelte 组件中使用 $t 函数来获取翻译内容。

<script>
  import { t } from 'svelte-i18n';
</script>

<h1>{$t('welcome')}</h1>
<p>{$t('greeting', { name: 'John' })}</p>

6.5 切换语言

你可以通过 locale.set 方法来动态切换语言。

<script>
  import { locale } from 'svelte-i18n';
</script>

<button on:click={() => locale.set('en')}>English</button>
<button on:click={() => locale.set('zh')}>中文</button>

6.6 在 `App.svelte` 中引入 `i18n.js`

确保在 App.svelte 或你的主入口文件中引入 i18n.js。

<script>
  import './i18n.js';
</script>

确保加载完i18n后在加载页面

<script>
  import { locale } from "svelte-i18n";
  import Router from "@/router/Router.svelte";
</script>
{#if $locale}
  <Layout>
    <Router />
  </Layout>
{/if}

6.7 运行项目

使用 npm run dev 运行你的项目，你应该能够看到国际化内容并根据按钮切换语言。

6.8 构建项目

当你准备好发布项目时，使用 npm run build 来构建项目。

npm run build

6.9 预览项目

使用 npm run preview 来预览构建后的项目。

npm run preview

6.10 检查项目

使用 npm run check 来检查 Svelte 和 TypeScript 的类型。

npm run check

通过以上步骤，你应该能够在 Svelte 项目中成功使用 svelte-i18n 来实现国际化功能。

七、svelte接口请求

在 Svelte 项目中使用 axios 进行 HTTP 请求是非常常见的操作。以下是如何在 Svelte 项目中集成和使用 axios 的步骤：

7.1 安装 `axios`

首先，确保你已经安装了 axios。根据你的 package.json 文件，它已经存在于 dependencies 中。

npm install axios

7.2 创建 `axios` 实例

为了更好的管理和配置 axios，通常会在 src/utils 目录下创建一个 api.ts 或 api.js 文件来创建 axios 实例。

// src/utils/api.ts
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com', // 你的 API 基础 URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;

7.3 在 Svelte 组件中使用 `axios`

你可以在 Svelte 组件中导入并使用 axios 实例来发送 HTTP 请求。

<script lang="ts">
  import api from '@/utils/api';
  import { onMount } from 'svelte';

  let data: any;

  onMount(async () => {
    try {
      const response = await api.get('/endpoint');
      data = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  });
</script>

{#if data}
  <div>
    <h1>{data.title}</h1>
    <p>{data.description}</p>
  </div>
{/if}

7.4 处理请求和响应拦截器

你可以在 axios 实例中添加请求和响应拦截器，以便在请求发送前或响应到达后进行一些处理。

// src/utils/api.ts
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
api.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理，例如添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
api.interceptors.response.use(
  (response) => {
    // 对响应数据做一些处理
    return response;
  },
  (error) => {
    // 对响应错误做一些处理
    return Promise.reject(error);
  }
);

export default api;

7.5 在 `App.svelte` 中使用 `axios`

你可以在 App.svelte 中使用 axios 来获取数据或执行其他 HTTP 操作。

<script lang="ts">
  import api from '@/utils/api';
  import { onMount } from 'svelte';

  let userData: any;

  onMount(async () => {
    try {
      const response = await api.get('/user');
      userData = response.data;
    } catch (error) {
      console.error('Error fetching user data:', error);
    }
  });
</script>

{#if userData}
  <div>
    <h1>Welcome, {userData.name}!</h1>
    <p>Email: {userData.email}</p>
  </div>
{/if}

7.6 处理错误

在使用 axios 时，确保你处理了可能的错误，例如网络错误或服务器错误。

<script lang="ts">
  import api from '@/utils/api';
  import { onMount } from 'svelte';

  let userData: any;
  let errorMessage: string | null = null;

  onMount(async () => {
    try {
      const response = await api.get('/user');
      userData = response.data;
    } catch (error) {
      errorMessage = 'Failed to fetch user data. Please try again later.';
      console.error('Error fetching user data:', error);
    }
  });
</script>

{#if userData}
  <div>
    <h1>Welcome, {userData.name}!</h1>
    <p>Email: {userData.email}</p>
  </div>
{:else if errorMessage}
  <p style="color: red;">{errorMessage}</p>
{/if}

通过以上步骤，你应该能够在 Svelte 项目中成功使用 axios 来进行 HTTP 请求。

八、svelte组件库

这里用的是melt-ui，访问地址是：https://www.melt-ui.com/docs/introduction
一键配置

npx @melt-ui/cli@latest init

九、svelte阿里图标库

在 Svelte 项目中使用阿里图标（如 iconfont）可以通过以下步骤实现：

9.1 获取阿里图标

访问 iconfont 并登录。
创建一个项目，将需要的图标添加到项目中。
选择 Font class 或 Symbol 方式生成代码。
点击 下载至本地，解压后得到图标文件。

9.2 将图标文件放入项目

将下载的图标文件（如 iconfont.css 和字体文件）放入项目的 public 或 src/assets 目录中。

例如：

public/
  iconfont/
    iconfont.css
    iconfont.ttf
    iconfont.woff
    iconfont.woff2

9.3 引入图标文件

在 App.svelte 或 main.ts 中引入 iconfont.css 文件。

<script lang="ts">
  import "./app.css";
  import Layout from "@/layout/Layout.svelte";
  import Router from "@/router/Router.svelte";
  import { locale } from "svelte-i18n";
  import Toast from "./components/Toast.svelte";
  import { toast } from "@/utils/toastService";

  // 引入阿里图标
  import '../public/iconfont/iconfont.css';
</script>

9.4 使用图标

在 Svelte 组件中使用阿里图标，直接通过 class 引用图标类名。

<div>
  <i class="iconfont icon-home"></i> <!-- icon-home 是图标类名 -->
  <i class="iconfont icon-user"></i> <!-- icon-user 是图标类名 -->
</div>

9.5 动态切换图标

如果需要动态切换图标，可以将图标类名绑定到变量。

<script lang="ts">
  let iconClass = 'icon-home';
</script>

<div>
  <i class={`iconfont ${iconClass}`}></i>
  <button on:click={() => iconClass = 'icon-user'}>切换图标</button>
</div>

9.6 使用 Symbol 方式（可选）

如果选择 Symbol 方式，需要引入 iconfont.js 文件，并使用 <svg> 标签。

<script lang="ts">
  import '../public/iconfont/iconfont.js';
</script>

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-home"></use> <!-- #icon-home 是图标 ID -->
</svg>

9.7 样式调整（可选）

如果需要调整图标大小或颜色，可以通过 CSS 设置。

<style lang="less">
  .iconfont {
    font-size: 24px;
    color: #333;
  }
</style>

9.8 示例代码

以下是一个完整的示例：

<script lang="ts">
  import "./app.css";
  import Layout from "@/layout/Layout.svelte";
  import Router from "@/router/Router.svelte";
  import { locale } from "svelte-i18n";
  import Toast from "./components/Toast.svelte";
  import { toast } from "@/utils/toastService";

  // 引入阿里图标
  import '../public/iconfont/iconfont.css';

  let iconClass = 'icon-home';
</script>

{#if $locale}
  <Layout>
    <Router />
  </Layout>
  {#if $toast.visible}
    <Toast message={$toast.message} />
  {/if}
{/if}

<div>
  <i class={`iconfont ${iconClass}`}></i>
  <button on:click={() => iconClass = 'icon-user'}>切换图标</button>
</div>

<style lang="less">
  .iconfont {
    font-size: 24px;
    color: #333;
  }
</style>

通过以上步骤，你可以在 Svelte 项目中成功使用阿里图标。如果需要更多定制化功能，可以参考 iconfont 官方文档。

十、svelte轮播图

这里用的是https://3.swiper.com.cn/
下载引入相关css与js即可
demo如下

<script>
    import { onMount } from 'svelte';
    import  '@/utils/swiper/swiper.min.js';
    import '@/utils/swiper/swiper.min.css';
    let swiperInstance;
    onMount(() => {
      // 初始化 Swiper
      swiperInstance = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay:2500,
        loop:true
      });
    });
  </script>
  
  <style>
   html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 350px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
  </style>
  
 <!-- Swiper -->
 <div class="swiper-container">
  <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>

十一、store数据共享

在 Svelte 中，store 是一个核心概念，用于管理应用的状态。为了更好地组织代码，可以将 store 封装为模块，包括 state、actions、getters 和 mutations，类似于 Vuex 或 Redux 的设计模式。以下是如何封装 store 的示例：

1. 创建 `store` 模块

在 src/store 目录下创建一个模块，例如 centerStore.ts，用于管理特定模块的状态和逻辑。

// src/store/centerStore.ts
import { writable, derived } from 'svelte/store';

// State
const state = writable({
  userData: null,
  loading: false,
  error: null,
});

// Actions
const actions = {
  async getUserData(params: { onlyMakeTheSame: boolean }) {
    try {
      state.update((s) => ({ ...s, loading: true, error: null }));
      // 模拟 API 调用
      const response = await fetch('/api/user', { method: 'GET' });
      const data = await response.json();
      state.update((s) => ({ ...s, userData: data, loading: false }));
    } catch (error) {
      state.update((s) => ({ ...s, error: error.message, loading: false }));
    }
  },
};

// Getters
const getters = {
  userData: derived(state, ($state) => $state.userData),
  isLoading: derived(state, ($state) => $state.loading),
  error: derived(state, ($state) => $state.error),
};

// Mutations (可选)
const mutations = {
  setUserData(userData: any) {
    state.update((s) => ({ ...s, userData }));
  },
};

// 导出模块
export const centerStore = {
  state,
  actions,
  getters,
  mutations,
};

2. 创建全局 `store`

在 src/store/index.ts 中整合所有模块，创建一个全局 store。

// src/store/index.ts
import { centerStore } from './centerStore';

export const store = {
  center: centerStore,
};

3. 在组件中使用 `store`

在 Svelte 组件中导入并使用 store。

<script lang="ts">
  import { store } from '@/store/index';
  import { onMount } from 'svelte';

  // 获取 state 和 getters
  const { state, getters } = store.center;

  // 调用 action
  function fetchData() {
    store.center.actions.getUserData({ onlyMakeTheSame: false });
  }

  onMount(() => {
    fetchData();
  });
</script>

{#if $getters.isLoading}
  <p>Loading...</p>
{:else if $getters.error}
  <p style="color: red;">Error: {$getters.error}</p>
{:else if $getters.userData}
  <div>
    <h1>User Data</h1>
    <pre>{JSON.stringify($getters.userData, null, 2)}</pre>
  </div>
{/if}

<button on:click={fetchData}>Refresh Data</button>

4. 封装 `store` 的优势

模块化：将状态和逻辑按模块划分，便于维护和扩展。
复用性：actions 和 getters 可以在多个组件中复用。
可测试性：actions 和 mutations 可以单独测试。
清晰性：state、actions、getters 和 mutations 分离，代码结构更清晰。

5. 示例：`about.svelte` 中使用 `store`

根据你的 about.svelte 文件，可以这样使用 store：

<script lang="ts">
  import { t, locale } from "svelte-i18n";
  import { toast } from '@/utils/toastService';
  import { store } from '@/store/index';

  function getData() {
    store.center.actions.getUserData({ onlyMakeTheSame: false });
  }
</script>

<h1>{$t("welcome")}</h1>
<p>{$t("about")}</p>

<button on:click={getData}>获取接口数据</button>

{#if $store.center.getters.isLoading}
  <p>Loading...</p>
{:else if $store.center.getters.error}
  <p style="color: red;">Error: {$store.center.getters.error}</p>
{:else if $store.center.getters.userData}
  <div>
    <h1>User Data</h1>
    <pre>{JSON.stringify($store.center.getters.userData, null, 2)}</pre>
  </div>
{/if}

通过以上步骤，你可以在 Svelte 项目中封装 store，并实现 state、actions、getters 和 mutations 的分离，使代码更易于维护和扩展。

十二、扩展内容

这里由于使用的melt-ui没有toast提示于是做了一个全局组建toas.svelte

组建创建

<script>
  import { fade } from "svelte/transition";
  export let message = "";
  export let duration = 3000; // 持续时间，单位毫秒

  let visible = false;

  const showToast = () => {
    visible = true;
    setTimeout(() => {
      visible = false;
    }, duration);
  };

  showToast(); // 显示Toast
</script>

{#if visible}
  <div class="toast" transition:fade>
    {message}
  </div>
{/if}

<style>
  .toast {
    position: fixed;
    top: 300px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border-radius: 5px;
    z-index: 1000;
  }
</style>

toastService封装

import { writable } from 'svelte/store';
function createToast() {
  const { subscribe, set, update } = writable({ message: '', visible: false });
 
  function show(message, duration = 3000) {
    set({ message, visible: true });
    setTimeout(() => {
      update(current => ({ ...current, visible: false }));
    }, duration);
  }
 
  return {
    subscribe,
    show, // 公开show方法供外部调用
  };
}
 
export const toast = createToast(); // 创建并导出toast服务实例

全局调用app.svelte

<script lang="ts">

  import Toast from "./components/Toast.svelte";
  import { toast } from "@/utils/toastService";
</script>
  {#if $toast.visible}
    <!-- 使用$来访问store的值 -->
    <Toast message={$toast.message} />
    <!-- 将消息传递给Toast组件 -->
  {/if}

使用

  import { toast } from '@/utils/toastService';
  toast.show('Hello, this is a toast!')

十三、框架git地址

https://gitee.com/cyp926/svelte-vite