# svelte-vite **Repository Path**: yuppie_luck/svelte-vite ## Basic Information - **Project Name**: svelte-vite - **Description**: svelte项目框架包含了路由：svelte-spa-router 样式：less tailwind 国际化：svelte-i18n 接口请求：axios 环境变量配置:.env 组件库：melt-ui 图标库：iconfont 轮播图：swiper node:20.18.1 npm 10.8.2 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-04-07 - **Last Updated**: 2025-10-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > **框架太“重”了**：通常一个小型项目只由少数几个简单页面构成，如果使用 Vue 或者 React 这些框架来研发的话，有点“大材小用”了。构建的产物中包含了不少框架运行时代码(虚拟 DOM、响应式、状态管理等)，这些代码对于小型项目而言是冗余的，它们影响了包体大小，进而影响页面的启动速度和执行性能。 > **打包太慢了**：以 Vue CLI 为例，它的底层基于 Webpack，虽然 Webpack 具备更强大的功能和灵活性，但相比于 Vite、Esbuild 这些以速度为标杆的构建工具来说，它的速度确实慢了一些，影响了研发效率。 @[toc] ## 一、 创建基本项目 ### 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 ``` **基本项目创建完成** ## 二、目录结构 根据上一步创建项目，项目的基本结构栓是完成了，但这样还是不够的，接下来介绍一下完整的项目目录 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/faa1d82a4f50487caa9e5c9baa137743.png) ## 三、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在内的捆绑器进行了测试 1. 要使用动态导入的组件，您需要利用包装方法（根据路线包装文档，该方法可用于各种操作）。首先，导入wrap方法： ``` import {wrap} from 'svelte-spa-router/wrap' ``` 2. 然后，在路由定义中，使用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 在页面之间导航 1. 锚点导航 ``` Thus Spoke Zarathustra ``` 2. use:link导航（可以使用use：link操作，而不必在每个链接前键入#） ``` The Little Prince ``` ### 3.3 使用路由 在app.svelte中全局调用 ``` import Router from 'svelte-spa-router' ``` 然后，通过将组件放置在标记中，将路由器显示在您想要的任何位置 ``` ``` ## 四、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` 中。 ```bash npm install svelte-i18n ``` ### 6.2 初始化 `svelte-i18n` 在你的 Svelte 项目中，通常会在 `src` 目录下创建一个 `i18n.js` 或 `i18n.ts` 文件来初始化 `svelte-i18n`。 ```javascript // 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`。 ```json // src/locales/en.json { "welcome": "Welcome to Svelte App", "greeting": "Hello, {name}!" } ``` ```json // src/locales/zh.json { "welcome": "欢迎使用 Svelte 应用", "greeting": "你好, {name}!" } ``` ### 6.4 在 Svelte 组件中使用 `svelte-i18n` 你可以在 Svelte 组件中使用 `$t` 函数来获取翻译内容。 ```svelte

{$t('welcome')}

{$t('greeting', { name: 'John' })}

``` ### 6.5 切换语言 你可以通过 `locale.set` 方法来动态切换语言。 ```svelte ``` ### 6.6 在 `App.svelte` 中引入 `i18n.js` 1. 确保在 `App.svelte` 或你的主入口文件中引入 `i18n.js`。 ```svelte ``` 2. 确保加载完i18n后在加载页面 ```App.svelte {#if $locale} {/if} ``` ### 6.7 运行项目 使用 `npm run dev` 运行你的项目，你应该能够看到国际化内容并根据按钮切换语言。 ### 6.8 构建项目 当你准备好发布项目时，使用 `npm run build` 来构建项目。 ```bash npm run build ``` ### 6.9 预览项目 使用 `npm run preview` 来预览构建后的项目。 ```bash npm run preview ``` ### 6.10 检查项目 使用 `npm run check` 来检查 Svelte 和 TypeScript 的类型。 ```bash npm run check ``` 通过以上步骤，你应该能够在 Svelte 项目中成功使用 `svelte-i18n` 来实现国际化功能。 ## 七、svelte接口请求 在 Svelte 项目中使用 `axios` 进行 HTTP 请求是非常常见的操作。以下是如何在 Svelte 项目中集成和使用 `axios` 的步骤： ### 7.1 安装 `axios` 首先，确保你已经安装了 `axios`。根据你的 `package.json` 文件，它已经存在于 `dependencies` 中。 ```bash npm install axios ``` ### 7.2 创建 `axios` 实例 为了更好的管理和配置 `axios`，通常会在 `src/utils` 目录下创建一个 `api.ts` 或 `api.js` 文件来创建 `axios` 实例。 ```typescript // 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 请求。 ```svelte {#if data}

{data.title}

{data.description}

{/if} ``` ### 7.4 处理请求和响应拦截器 你可以在 `axios` 实例中添加请求和响应拦截器，以便在请求发送前或响应到达后进行一些处理。 ```typescript // 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 操作。 ```svelte {#if userData}

Welcome, {userData.name}!

Email: {userData.email}

{/if} ``` ### 7.6 处理错误 在使用 `axios` 时，确保你处理了可能的错误，例如网络错误或服务器错误。 ```svelte {#if userData}

Welcome, {userData.name}!

Email: {userData.email}

{:else if errorMessage}

{errorMessage}

{/if} ``` 通过以上步骤，你应该能够在 Svelte 项目中成功使用 `axios` 来进行 HTTP 请求。 ## 八、svelte组件库 这里用的是melt-ui，访问地址是：https://www.melt-ui.com/docs/introduction 一键配置 ``` npx @melt-ui/cli@latest init ``` ## 九、svelte阿里图标库 在 Svelte 项目中使用阿里图标（如 [iconfont](https://www.iconfont.cn/)）可以通过以下步骤实现： --- ### 9.1 获取阿里图标 1. 访问 [iconfont](https://www.iconfont.cn/) 并登录。 2. 创建一个项目，将需要的图标添加到项目中。 3. 选择 `Font class` 或 `Symbol` 方式生成代码。 4. 点击 `下载至本地`，解压后得到图标文件。 --- ### 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` 文件。 ```svelte ``` --- ### 9.4 使用图标 在 Svelte 组件中使用阿里图标，直接通过 `class` 引用图标类名。 ```svelte
``` --- ### 9.5 动态切换图标 如果需要动态切换图标，可以将图标类名绑定到变量。 ```svelte
``` --- ### 9.6 使用 Symbol 方式（可选） 如果选择 `Symbol` 方式，需要引入 `iconfont.js` 文件，并使用 `` 标签。 ```svelte ``` --- ### 9.7 样式调整（可选） 如果需要调整图标大小或颜色，可以通过 CSS 设置。 ```svelte ``` --- ### 9.8 示例代码 以下是一个完整的示例： ```svelte {#if $locale} {#if $toast.visible} {/if} {/if}
``` --- 通过以上步骤，你可以在 Svelte 项目中成功使用阿里图标。如果需要更多定制化功能，可以参考 [iconfont 官方文档](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code)。 ## 十、svelte轮播图 这里用的是https://3.swiper.com.cn/ 下载引入相关css与js即可 demo如下 ```
Slide 1
Slide 2
``` ## 十一、store数据共享 在 Svelte 中，`store` 是一个核心概念，用于管理应用的状态。为了更好地组织代码，可以将 `store` 封装为模块，包括 `state`、`actions`、`getters` 和 `mutations`，类似于 Vuex 或 Redux 的设计模式。以下是如何封装 `store` 的示例： --- ### 1. 创建 `store` 模块 在 `src/store` 目录下创建一个模块，例如 `centerStore.ts`，用于管理特定模块的状态和逻辑。 ```typescript // 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`。 ```typescript // src/store/index.ts import { centerStore } from './centerStore'; export const store = { center: centerStore, }; ``` --- ### 3. 在组件中使用 `store` 在 Svelte 组件中导入并使用 `store`。 ```svelte {#if $getters.isLoading}

Loading...

{:else if $getters.error}

Error: {$getters.error}

{:else if $getters.userData}

User Data

{JSON.stringify($getters.userData, null, 2)}
{/if} ``` --- ### 4. 封装 `store` 的优势 - **模块化**：将状态和逻辑按模块划分，便于维护和扩展。 - **复用性**：`actions` 和 `getters` 可以在多个组件中复用。 - **可测试性**：`actions` 和 `mutations` 可以单独测试。 - **清晰性**：`state`、`actions`、`getters` 和 `mutations` 分离，代码结构更清晰。 --- ### 5. 示例：`about.svelte` 中使用 `store` 根据你的 `about.svelte` 文件，可以这样使用 `store`： ```svelte

{$t("welcome")}

{$t("about")}

{#if $store.center.getters.isLoading}

Loading...

{:else if $store.center.getters.error}

Error: {$store.center.getters.error}

{:else if $store.center.getters.userData}

User Data

{JSON.stringify($store.center.getters.userData, null, 2)}
{/if} ``` --- 通过以上步骤，你可以在 Svelte 项目中封装 `store`，并实现 `state`、`actions`、`getters` 和 `mutations` 的分离，使代码更易于维护和扩展。 ## 十二、扩展内容 这里由于使用的melt-ui没有toast提示于是做了一个全局组建toas.svelte 1. 组建创建 ``` {#if visible}
{message}
{/if} ``` 2. 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服务实例 ``` 3. 全局调用app.svelte ``` {#if $toast.visible} {/if} ``` 4. 使用 ``` import { toast } from '@/utils/toastService'; toast.show('Hello, this is a toast!') ``` ## 十三、框架git地址 https://gitee.com/cyp926/svelte-vite.git