登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›惊爆！10 分钟用 Svelte+Vite+TS+Melt - UI 搭好框架 ...

惊爆！10 分钟用 Svelte+Vite+TS+Melt - UI 搭好框架

格恳绌 前天 22:36
框架太“重”了：通常一个小型项目只由少数几个简单页面构成，如果使用 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
  1. npm install vite
复制代码
1.2 创建 Svelte 项目

Vite 原生支持直接通过脚手架创建 Svelte 项目，执行以下命令
  1. npm create vite@latest
复制代码
输入命令后选择如下
  1. ✔ Project name: vite-svelte
  3. ? Select a framework: › - Use arrow-keys. Return to submit.
  4. <body>
  5. <svg  aria-hidden="true">
  6.   <use xlink:href="#icon-home"></use>
  7. </svg> <Router {routes}/>
  8. </body>Vanilla
  9. <body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>Vue
  14. <body>
  15. <svg  aria-hidden="true">
  16.   <use xlink:href="#icon-home"></use>
  17. </svg> <Router {routes}/>
  18. </body>React
  19. <body>
  20. <svg  aria-hidden="true">
  21.   <use xlink:href="#icon-home"></use>
  22. </svg> <Router {routes}/>
  23. </body>Preact
  24. <body>
  25. <svg  aria-hidden="true">
  26.   <use xlink:href="#icon-home"></use>
  27. </svg> <Router {routes}/>
  28. </body>Lit
  29. ❯<svg  aria-hidden="true">
  30.   <use xlink:href="#icon-home"></use>
  31. </svg>Svelte
  32. <body>
  33. <svg  aria-hidden="true">
  34.   <use xlink:href="#icon-home"></use>
  35. </svg> <Router {routes}/>
  36. </body>Solid
  37. <body>
  38. <svg  aria-hidden="true">
  39.   <use xlink:href="#icon-home"></use>
  40. </svg> <Router {routes}/>
  41. </body>Qwik
  42. <body>
  43. <svg  aria-hidden="true">
  44.   <use xlink:href="#icon-home"></use>
  45. </svg> <Router {routes}/>
  46. </body>Others
  48. ? Select a variant: › - Use arrow-keys. Return to submit.
  49. <body>
  50. <svg  aria-hidden="true">
  51.   <use xlink:href="#icon-home"></use>
  52. </svg> <Router {routes}/>
  53. </body>TypeScript
  54. ❯<svg  aria-hidden="true">
  55.   <use xlink:href="#icon-home"></use>
  56. </svg>JavaScript
  57. <body>
  58. <svg  aria-hidden="true">
  59.   <use xlink:href="#icon-home"></use>
  60. </svg> <Router {routes}/>
  61. </body>SvelteKit
复制代码
基本项目创建完成
二、目录结构

根据上一步创建项目，项目的基本结构栓是完成了，但这样还是不够的，接下来介绍一下完整的项目目录
1.png

三、svelte路由配置

3.1 npm安装

项目中安装svelte-spa-router
  1. npm install svelte-spa-router
复制代码
3.2 定义router


  • 每条路由都是一个普通的Svelte组件，包含标记、脚本、绑定等。任何Svelte组件都可以是路由。
  • 路由定义只是一个JavaScript字典（对象），其中键是一个带有路径（包括参数等）的字符串，值是路由对象。
  1. import Home from './routes/Home.svelte'
  2. import Author from './routes/Author.svelte'
  3. import Book from './routes/Book.svelte'
  4. import NotFound from './routes/NotFound.svelte'
  6. const routes = {
  7. <body>
  8. <svg  aria-hidden="true">
  9.   <use xlink:href="#icon-home"></use>
  10. </svg> <Router {routes}/>
  11. </body>// Exact path
  12. <body>
  13. <svg  aria-hidden="true">
  14.   <use xlink:href="#icon-home"></use>
  15. </svg> <Router {routes}/>
  16. </body>'/': Home,
  18. <body>
  19. <svg  aria-hidden="true">
  20.   <use xlink:href="#icon-home"></use>
  21. </svg> <Router {routes}/>
  22. </body>// Using named parameters, with last being optional
  23. <body>
  24. <svg  aria-hidden="true">
  25.   <use xlink:href="#icon-home"></use>
  26. </svg> <Router {routes}/>
  27. </body>'/author/:first/:last?': Author,
  29. <body>
  30. <svg  aria-hidden="true">
  31.   <use xlink:href="#icon-home"></use>
  32. </svg> <Router {routes}/>
  33. </body>// Wildcard parameter
  34. <body>
  35. <svg  aria-hidden="true">
  36.   <use xlink:href="#icon-home"></use>
  37. </svg> <Router {routes}/>
  38. </body>'/book/*': Book,
  40. <body>
  41. <svg  aria-hidden="true">
  42.   <use xlink:href="#icon-home"></use>
  43. </svg> <Router {routes}/>
  44. </body>// Catch-all
  45. <body>
  46. <svg  aria-hidden="true">
  47.   <use xlink:href="#icon-home"></use>
  48. </svg> <Router {routes}/>
  49. </body>// This is optional, but if present it must be the last
  50. <body>
  51. <svg  aria-hidden="true">
  52.   <use xlink:href="#icon-home"></use>
  53. </svg> <Router {routes}/>
  54. </body>'*': NotFound,
  55. }
复制代码
3.2.1 动态导入组件

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

  • 要使用动态导入的组件，您需要利用包装方法（根据路线包装文档，该方法可用于各种操作）。首先，导入wrap方法：
  1. import {wrap} from 'svelte-spa-router/wrap'
复制代码

  • 然后，在路由定义中，使用wrap方法包装路由，将一个函数传递给asyncComponent属性，该函数将动态导入的组件返回给asyncComponent：
  1. wrap({
  2. <body>
  3. <svg  aria-hidden="true">
  4.   <use xlink:href="#icon-home"></use>
  5. </svg> <Router {routes}/>
  6. </body>asyncComponent: () => import('./Foo.svelte')
  7. })
复制代码
案例：
  1. // Import the wrap method
  2. import {wrap} from 'svelte-spa-router/wrap'
  4. // Note that Author and Book are not imported here anymore, so they can be imported at runtime
  5. import Home from './routes/Home.svelte'
  6. import NotFound from './routes/NotFound.svelte'
  8. const routes = {
  9. <body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>'/': Home,
  15. <body>
  16. <svg  aria-hidden="true">
  17.   <use xlink:href="#icon-home"></use>
  18. </svg> <Router {routes}/>
  19. </body>// Wrapping the Author component
  20. <body>
  21. <svg  aria-hidden="true">
  22.   <use xlink:href="#icon-home"></use>
  23. </svg> <Router {routes}/>
  24. </body>'/author/:first/:last?': wrap({
  25. <body>
  26. <svg  aria-hidden="true">
  27.   <use xlink:href="#icon-home"></use>
  28. </svg> <Router {routes}/>
  29. </body><body>
  30. <svg  aria-hidden="true">
  31.   <use xlink:href="#icon-home"></use>
  32. </svg> <Router {routes}/>
  33. </body>asyncComponent: () => import('./routes/Author.svelte')
  34. <body>
  35. <svg  aria-hidden="true">
  36.   <use xlink:href="#icon-home"></use>
  37. </svg> <Router {routes}/>
  38. </body>}),
  40. <body>
  41. <svg  aria-hidden="true">
  42.   <use xlink:href="#icon-home"></use>
  43. </svg> <Router {routes}/>
  44. </body>// Wrapping the Book component
  45. <body>
  46. <svg  aria-hidden="true">
  47.   <use xlink:href="#icon-home"></use>
  48. </svg> <Router {routes}/>
  49. </body>'/book/*': wrap({
  50. <body>
  51. <svg  aria-hidden="true">
  52.   <use xlink:href="#icon-home"></use>
  53. </svg> <Router {routes}/>
  54. </body><body>
  55. <svg  aria-hidden="true">
  56.   <use xlink:href="#icon-home"></use>
  57. </svg> <Router {routes}/>
  58. </body>asyncComponent: () => import('./routes/Book.svelte')
  59. <body>
  60. <svg  aria-hidden="true">
  61.   <use xlink:href="#icon-home"></use>
  62. </svg> <Router {routes}/>
  63. </body>}),
  65. <body>
  66. <svg  aria-hidden="true">
  67.   <use xlink:href="#icon-home"></use>
  68. </svg> <Router {routes}/>
  69. </body>// Catch-all route last
  70. <body>
  71. <svg  aria-hidden="true">
  72.   <use xlink:href="#icon-home"></use>
  73. </svg> <Router {routes}/>
  74. </body>'*': NotFound,
  75. }
复制代码
3.2.2 在页面之间导航


  • 锚点导航
  1. Thus Spoke Zarathustra
复制代码

  • use:link导航（可以使用use：link操作，而不必在每个链接前键入#）
  1. The Little Prince
复制代码
3.3 使用路由

在app.svelte中全局调用
  1. import Router from 'svelte-spa-router'
复制代码
然后，通过将组件放置在标记中，将路由器显示在您想要的任何位置
  1. <body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>
复制代码
四、svelte CSS预处理器

4.1 less的使用

4.1.1 npm安装

安装less与svelte-preprocess-less依赖
  1. npm install --save-dev svelte-preprocess-less less
复制代码
在vite.config.js进行配置
  1. import { less } from 'svelte-preprocess-less'export default defineConfig({<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>plugins: [svelte({<body>
  6. <svg  aria-hidden="true">
  7.   <use xlink:href="#icon-home"></use>
  8. </svg> <Router {routes}/>
  9. </body><body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>preprocess: {<body>
  14. <svg  aria-hidden="true">
  15.   <use xlink:href="#icon-home"></use>
  16. </svg> <Router {routes}/>
  17. </body><body>
  18. <svg  aria-hidden="true">
  19.   <use xlink:href="#icon-home"></use>
  20. </svg> <Router {routes}/>
  21. </body>  style: less(),<body>
  22. <svg  aria-hidden="true">
  23.   <use xlink:href="#icon-home"></use>
  24. </svg> <Router {routes}/>
  25. </body><body>
  26. <svg  aria-hidden="true">
  27.   <use xlink:href="#icon-home"></use>
  28. </svg> <Router {routes}/>
  29. </body>},<body>
  30. <svg  aria-hidden="true">
  31.   <use xlink:href="#icon-home"></use>
  32. </svg> <Router {routes}/>
  33. </body>  })],})
复制代码
4.2 Tailwind CSS的使用

通过npx安装直接配置完 tailwindcss
  1. npx sv add tailwindcss
复制代码
五、svelte环境变量配置

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

所有环境变量必须以VITE_为前缀
  1. VITE_API_URL=https://api.example.com
  2. 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 在代码中使用环境变量
  1. console.log(import.meta.env.VITE_API_URL);
复制代码
5.4 配置运行与打包环境
  1.   "scripts": {<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>"dev": "vite --mode dev",//运行dev环境<body>
  6. <svg  aria-hidden="true">
  7.   <use xlink:href="#icon-home"></use>
  8. </svg> <Router {routes}/>
  9. </body>"dev-pro": "vite --mode pro",//运行pro环境<body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>"build": "vite build",<body>
  14. <svg  aria-hidden="true">
  15.   <use xlink:href="#icon-home"></use>
  16. </svg> <Router {routes}/>
  17. </body>"preview": "vite preview",<body>
  18. <svg  aria-hidden="true">
  19.   <use xlink:href="#icon-home"></use>
  20. </svg> <Router {routes}/>
  21. </body>"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 中。
  1. npm install svelte-i18n
复制代码
6.2 初始化 svelte-i18n

在你的 Svelte 项目中，通常会在 src 目录下创建一个 i18n.js 或 i18n.ts 文件来初始化 svelte-i18n。
  1. // src/i18n.js
  2. import { init, register, locale } from 'svelte-i18n';
  4. // 注册默认语言
  5. register('en', () => import('./locales/en.json'));
  6. register('zh', () => import('./locales/zh.json'));
  8. // 初始化并设置默认语言
  9. init({
  10.   fallbackLocale: 'en',
  11.   initialLocale: 'en',
  12. });
复制代码
6.3 创建语言文件

在 src/locales 目录下创建语言文件，例如 en.json 和 zh.json。
  1. // src/locales/en.json
  2. {
  3.   "welcome": "Welcome to Svelte App",
  4.   "greeting": "Hello, {name}!"
  5. }
复制代码
  1. // src/locales/zh.json
  2. {
  3.   "welcome": "欢迎使用 Svelte 应用",
  4.   "greeting": "你好, {name}!"
  5. }
复制代码
6.4 在 Svelte 组件中使用 svelte-i18n

你可以在 Svelte 组件中使用 $t 函数来获取翻译内容。
  1. <h1>{$t('welcome')}</h1>
  2. <p>{$t('greeting', { name: 'John' })}</p>
复制代码
6.5 切换语言

你可以通过 locale.set 方法来动态切换语言。
  1. <button on:click={() => locale.set('en')}>English</button>
  2. <button on:click={() => locale.set('zh')}>中文</button>
复制代码
6.6 在 App.svelte 中引入 i18n.js


  • 确保在 App.svelte 或你的主入口文件中引入 i18n.js。
  1. [/code][list=1]
  2. [*]确保加载完i18n后在加载页面
  3. [/list][code]{#if $locale}<body>
  4. <svg  aria-hidden="true">
  5.   <use xlink:href="#icon-home"></use>
  6. </svg> <Router {routes}/>
  7. </body><body>
  8. <svg  aria-hidden="true">
  9.   <use xlink:href="#icon-home"></use>
  10. </svg> <Router {routes}/>
  11. </body>{/if}
复制代码
6.7 运行项目

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

当你准备好发布项目时，使用 npm run build 来构建项目。
  1. npm run build
复制代码
6.9 预览项目

使用 npm run preview 来预览构建后的项目。
  1. npm run preview
复制代码
6.10 检查项目

使用 npm run check 来检查 Svelte 和 TypeScript 的类型。
  1. npm run check
复制代码
通过以上步骤，你应该能够在 Svelte 项目中成功使用 svelte-i18n 来实现国际化功能。
七、svelte接口请求

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

首先，确保你已经安装了 axios。根据你的 package.json 文件，它已经存在于 dependencies 中。
  1. npm install axios
复制代码
7.2 创建 axios 实例

为了更好的管理和配置 axios，通常会在 src/utils 目录下创建一个 api.ts 或 api.js 文件来创建 axios 实例。
  1. // src/utils/api.tsimport axios from 'axios';const api = axios.create({  baseURL: 'https://api.example.com', // 你的 API 基础 URL  timeout: 10000, // 请求超时时间  headers: {<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>'Content-Type': 'application/json',  },});export default api;
复制代码
7.3 在 Svelte 组件中使用 axios

你可以在 Svelte 组件中导入并使用 axios 实例来发送 HTTP 请求。
  1. {#if data}<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>  [size=6]{data.title}[/size]
  7. <body>
  8. <svg  aria-hidden="true">
  9.   <use xlink:href="#icon-home"></use>
  10. </svg> <Router {routes}/>
  11. </body>{data.description}
  12.   {/if}
复制代码
7.4 处理请求和响应拦截器

你可以在 axios 实例中添加请求和响应拦截器，以便在请求发送前或响应到达后进行一些处理。
  1. // src/utils/api.tsimport axios from 'axios';const api = axios.create({  baseURL: 'https://api.example.com',  timeout: 10000,  headers: {<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>'Content-Type': 'application/json',  },});// 请求拦截器api.interceptors.request.use(  (config) => {<body>
  6. <svg  aria-hidden="true">
  7.   <use xlink:href="#icon-home"></use>
  8. </svg> <Router {routes}/>
  9. </body>// 在请求发送之前做一些处理，例如添加 token<body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>const token = localStorage.getItem('token');<body>
  14. <svg  aria-hidden="true">
  15.   <use xlink:href="#icon-home"></use>
  16. </svg> <Router {routes}/>
  17. </body>if (token) {<body>
  18. <svg  aria-hidden="true">
  19.   <use xlink:href="#icon-home"></use>
  20. </svg> <Router {routes}/>
  21. </body>  config.headers.Authorization = `Bearer ${token}`;<body>
  22. <svg  aria-hidden="true">
  23.   <use xlink:href="#icon-home"></use>
  24. </svg> <Router {routes}/>
  25. </body>}<body>
  26. <svg  aria-hidden="true">
  27.   <use xlink:href="#icon-home"></use>
  28. </svg> <Router {routes}/>
  29. </body>return config;  },  (error) => {<body>
  30. <svg  aria-hidden="true">
  31.   <use xlink:href="#icon-home"></use>
  32. </svg> <Router {routes}/>
  33. </body>return Promise.reject(error);  });// 响应拦截器api.interceptors.response.use(  (response) => {<body>
  34. <svg  aria-hidden="true">
  35.   <use xlink:href="#icon-home"></use>
  36. </svg> <Router {routes}/>
  37. </body>// 对响应数据做一些处理<body>
  38. <svg  aria-hidden="true">
  39.   <use xlink:href="#icon-home"></use>
  40. </svg> <Router {routes}/>
  41. </body>return response;  },  (error) => {<body>
  42. <svg  aria-hidden="true">
  43.   <use xlink:href="#icon-home"></use>
  44. </svg> <Router {routes}/>
  45. </body>// 对响应错误做一些处理<body>
  46. <svg  aria-hidden="true">
  47.   <use xlink:href="#icon-home"></use>
  48. </svg> <Router {routes}/>
  49. </body>return Promise.reject(error);  });export default api;
复制代码
7.5 在 App.svelte 中使用 axios

你可以在 App.svelte 中使用 axios 来获取数据或执行其他 HTTP 操作。
  1. {#if userData}<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>  [size=6]Welcome, {userData.name}![/size]
  7. <body>
  8. <svg  aria-hidden="true">
  9.   <use xlink:href="#icon-home"></use>
  10. </svg> <Router {routes}/>
  11. </body>Email: {userData.email}
  12.   {/if}
复制代码
7.6 处理错误

在使用 axios 时，确保你处理了可能的错误，例如网络错误或服务器错误。
  1. {#if userData}<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>  [size=6]Welcome, {userData.name}![/size]
  7. <body>
  8. <svg  aria-hidden="true">
  9.   <use xlink:href="#icon-home"></use>
  10. </svg> <Router {routes}/>
  11. </body>Email: {userData.email}
  12.   {:else if errorMessage}  {errorMessage}
  13. {/if}
复制代码
通过以上步骤，你应该能够在 Svelte 项目中成功使用 axios 来进行 HTTP 请求。
八、svelte组件库

这里用的是melt-ui，访问地址是：https://www.melt-ui.com/docs/introduction
一键配置
  1. npx @melt-ui/cli@latest init
复制代码
九、svelte阿里图标库

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


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

将下载的图标文件（如 iconfont.css 和字体文件）放入项目的 public 或 src/assets 目录中。
例如：
  1. public/  iconfont/<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>iconfont.css<body>
  6. <svg  aria-hidden="true">
  7.   <use xlink:href="#icon-home"></use>
  8. </svg> <Router {routes}/>
  9. </body>iconfont.ttf<body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>iconfont.woff<body>
  14. <svg  aria-hidden="true">
  15.   <use xlink:href="#icon-home"></use>
  16. </svg> <Router {routes}/>
  17. </body>iconfont.woff2
复制代码
9.3 引入图标文件

在 App.svelte 或 main.ts 中引入 iconfont.css 文件。
  1. [/code][size=4]9.4 使用图标[/size]
  3. 在 Svelte 组件中使用阿里图标，直接通过 class 引用图标类名。
  4. [code]<body>
  5. <svg  aria-hidden="true">
  6.   <use xlink:href="#icon-home"></use>
  7. </svg> <Router {routes}/>
  8. </body>  
复制代码
9.5 动态切换图标

如果需要动态切换图标，可以将图标类名绑定到变量。
  1. <body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body> iconClass = 'icon-user'}>切换图标
复制代码
9.6 使用 Symbol 方式（可选）

如果选择 Symbol 方式，需要引入 iconfont.js 文件，并使用  标签。
  1. <svg  aria-hidden="true">
  2.   <use xlink:href="#icon-home"></use>
  3. </svg>
复制代码
9.7 样式调整（可选）

如果需要调整图标大小或颜色，可以通过 CSS 设置。
  1. [/code][size=4]9.8 示例代码[/size]
  3. 以下是一个完整的示例：
  4. [code]{#if $locale}<body>
  5. <svg  aria-hidden="true">
  6.   <use xlink:href="#icon-home"></use>
  7. </svg> <Router {routes}/>
  8. </body><body>
  9. <svg  aria-hidden="true">
  10.   <use xlink:href="#icon-home"></use>
  11. </svg> <Router {routes}/>
  12. </body>  {#if $toast.visible}<body>
  13. <svg  aria-hidden="true">
  14.   <use xlink:href="#icon-home"></use>
  15. </svg> <Router {routes}/>
  16. </body>  {/if}{/if}<body>
  17. <svg  aria-hidden="true">
  18.   <use xlink:href="#icon-home"></use>
  19. </svg> <Router {routes}/>
  20. </body> iconClass = 'icon-user'}>切换图标
复制代码
通过以上步骤，你可以在 Svelte 项目中成功使用阿里图标。如果需要更多定制化功能，可以参考 iconfont 官方文档。
十、svelte轮播图

这里用的是https://3.swiper.com.cn/
下载引入相关css与js即可
demo如下
  1. <body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body><body>
  6. <svg  aria-hidden="true">
  7.   <use xlink:href="#icon-home"></use>
  8. </svg> <Router {routes}/>
  9. </body><body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body><body>
  14. <svg  aria-hidden="true">
  15.   <use xlink:href="#icon-home"></use>
  16. </svg> <Router {routes}/>
  17. </body>Slide 1<body>
  18. <svg  aria-hidden="true">
  19.   <use xlink:href="#icon-home"></use>
  20. </svg> <Router {routes}/>
  21. </body>  Slide 2<body>
  22. <svg  aria-hidden="true">
  23.   <use xlink:href="#icon-home"></use>
  24. </svg> <Router {routes}/>
  25. </body>  
复制代码
十一、store数据共享

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

在 src/store 目录下创建一个模块，例如 centerStore.ts，用于管理特定模块的状态和逻辑。
  1. // src/store/centerStore.tsimport { writable, derived } from 'svelte/store';// Stateconst state = writable({  userData: null,  loading: false,  error: null,});// Actionsconst actions = {  async getUserData(params: { onlyMakeTheSame: boolean }) {<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>try {<body>
  6. <svg  aria-hidden="true">
  7.   <use xlink:href="#icon-home"></use>
  8. </svg> <Router {routes}/>
  9. </body>  state.update((s) => ({ ...s, loading: true, error: null }));<body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>  // 模拟 API 调用<body>
  14. <svg  aria-hidden="true">
  15.   <use xlink:href="#icon-home"></use>
  16. </svg> <Router {routes}/>
  17. </body>  const response = await fetch('/api/user', { method: 'GET' });<body>
  18. <svg  aria-hidden="true">
  19.   <use xlink:href="#icon-home"></use>
  20. </svg> <Router {routes}/>
  21. </body>  const data = await response.json();<body>
  22. <svg  aria-hidden="true">
  23.   <use xlink:href="#icon-home"></use>
  24. </svg> <Router {routes}/>
  25. </body>  state.update((s) => ({ ...s, userData: data, loading: false }));<body>
  26. <svg  aria-hidden="true">
  27.   <use xlink:href="#icon-home"></use>
  28. </svg> <Router {routes}/>
  29. </body>} catch (error) {<body>
  30. <svg  aria-hidden="true">
  31.   <use xlink:href="#icon-home"></use>
  32. </svg> <Router {routes}/>
  33. </body>  state.update((s) => ({ ...s, error: error.message, loading: false }));<body>
  34. <svg  aria-hidden="true">
  35.   <use xlink:href="#icon-home"></use>
  36. </svg> <Router {routes}/>
  37. </body>}  },};// Gettersconst 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) {<body>
  38. <svg  aria-hidden="true">
  39.   <use xlink:href="#icon-home"></use>
  40. </svg> <Router {routes}/>
  41. </body>state.update((s) => ({ ...s, userData }));  },};// 导出模块export const centerStore = {  state,  actions,  getters,  mutations,};
复制代码
2. 创建全局 store

在 src/store/index.ts 中整合所有模块，创建一个全局 store。
  1. // src/store/index.ts
  2. import { centerStore } from './centerStore';
  4. export const store = {
  5.   center: centerStore,
  6. };
复制代码
3. 在组件中使用 store

在 Svelte 组件中导入并使用 store。
  1. {#if $getters.isLoading}  Loading...
  2. {:else if $getters.error}  Error: {$getters.error}
  3. {:else if $getters.userData}<body>
  4. <svg  aria-hidden="true">
  5.   <use xlink:href="#icon-home"></use>
  6. </svg> <Router {routes}/>
  7. </body>  [size=6]User Data[/size]
  9. <body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>{JSON.stringify($getters.userData, null, 2)}  {/if}Refresh Data
复制代码
4. 封装 store 的优势


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

根据你的 about.svelte 文件，可以这样使用 store：
  1. [size=6]{$t("welcome")}[/size]
  3. {$t("about")}
  4. 获取接口数据{#if $store.center.getters.isLoading}  Loading...
  5. {:else if $store.center.getters.error}  Error: {$store.center.getters.error}
  6. {:else if $store.center.getters.userData}<body>
  7. <svg  aria-hidden="true">
  8.   <use xlink:href="#icon-home"></use>
  9. </svg> <Router {routes}/>
  10. </body>  [size=6]User Data[/size]
  12. <body>
  13. <svg  aria-hidden="true">
  14.   <use xlink:href="#icon-home"></use>
  15. </svg> <Router {routes}/>
  16. </body>{JSON.stringify($store.center.getters.userData, null, 2)}  {/if}
复制代码
通过以上步骤，你可以在 Svelte 项目中封装 store，并实现 state、actions、getters 和 mutations 的分离，使代码更易于维护和扩展。
十二、扩展内容

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

  • 组建创建
  1. {#if visible}<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body>  {message}  {/if}
复制代码

  • toastService封装
  1. import { writable } from 'svelte/store';function createToast() {  const { subscribe, set, update } = writable({ message: '', visible: false });<svg  aria-hidden="true">
  2.   <use xlink:href="#icon-home"></use>
  3. </svg>function show(message, duration = 3000) {<body>
  4. <svg  aria-hidden="true">
  5.   <use xlink:href="#icon-home"></use>
  6. </svg> <Router {routes}/>
  7. </body>set({ message, visible: true });<body>
  8. <svg  aria-hidden="true">
  9.   <use xlink:href="#icon-home"></use>
  10. </svg> <Router {routes}/>
  11. </body>setTimeout(() => {<body>
  12. <svg  aria-hidden="true">
  13.   <use xlink:href="#icon-home"></use>
  14. </svg> <Router {routes}/>
  15. </body>  update(current => ({ ...current, visible: false }));<body>
  16. <svg  aria-hidden="true">
  17.   <use xlink:href="#icon-home"></use>
  18. </svg> <Router {routes}/>
  19. </body>}, duration);  }<svg  aria-hidden="true">
  20.   <use xlink:href="#icon-home"></use>
  21. </svg>return {<body>
  22. <svg  aria-hidden="true">
  23.   <use xlink:href="#icon-home"></use>
  24. </svg> <Router {routes}/>
  25. </body>subscribe,<body>
  26. <svg  aria-hidden="true">
  27.   <use xlink:href="#icon-home"></use>
  28. </svg> <Router {routes}/>
  29. </body>show, // 公开show方法供外部调用  };} export const toast = createToast(); // 创建并导出toast服务实例
复制代码

  • 全局调用app.svelte
  1.   {#if $toast.visible}<body>
  2. <svg  aria-hidden="true">
  3.   <use xlink:href="#icon-home"></use>
  4. </svg> <Router {routes}/>
  5. </body><body>
  6. <svg  aria-hidden="true">
  7.   <use xlink:href="#icon-home"></use>
  8. </svg> <Router {routes}/>
  9. </body><body>
  10. <svg  aria-hidden="true">
  11.   <use xlink:href="#icon-home"></use>
  12. </svg> <Router {routes}/>
  13. </body>  {/if}
复制代码

  • 使用
  1.   import { toast } from '@/utils/toastService';
  2.   toast.show('Hello, this is a toast!')
复制代码
十三、框架git地址

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
格恳绌
前天 22:36

0

粉丝关注

6

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫