svelte + vite + tailwindCss + ts 工程模板

已于 2022-09-14 21:55:15 修改
阅读量559 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端爬坑 文章标签： svelte tailwindCss vite
于 2022-09-09 00:34:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44178305/article/details/126774852
博主在尝试使用svelteKit构建项目时遇到热更新慢、插件集成困难及文档不清晰等问题。为了解决这些问题，博主选择了svelte结合vite、tailwindCss和typescript来构建项目，并提供了相应的模板链接，认为这是一个更好的选择。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 最近接触svelte的项目，感觉困难重重，特此记录

问题

  • 抛弃采用svelteKit构建的想法，热更新慢，插件集成困难、官方文档不清晰、路由兼容性差…

解决

  • svelte + vite + tailwindCss + ts 构建是不错的选择

模板见svelte + vite + tailwindCss + ts

从菜鸟到宗师：Tailwind CSS + Vite 快速修炼指南
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
04-23 1147
《从菜鸟到宗师：Tailwind CSS + Vite 快速修炼指南》带你轻松掌握 Tailwind CSS 和 Vite 的集成与使用，快速上手、提高开发效率，轻松打造高性能、响应式网页。
Vite + Tailwind CSS + PostCSS 的配置底层原理与工作流程解析
警警的博客
04-28 1586
以下是 Vite + Tailwind CSS + PostCSS 的配置底层原理与工作流程解析，结合技术文档与实践经验整理：• Vite 基于浏览器原生 ESM ，通过拦截模块请求实现• 开发阶段：采用 unbundled 模式直接返回源码，通过 • 生产构建：使用 ，生成静态资源• 工作流程：• 核心步骤： • 插件执行顺序遵循数组声明顺序，需在首位处理@import语句• 开发时：实时扫描项目文件中的类名，按需生成 CSS 规则（增量编译）• 生产环境：通过 配置静态分析，移除未使用的 CSS（Pu
svelte-tailwind:使用Svelte，Tailwind CSS，Webpack等的项目模板。
05-13
燕尾风 使用Svelte，Tailwind CSS，PostCSS和Webpack的项目模板 基本的Webpack配置基于 在本地运行 npm run start 进行生产构建 npm run build
svelte-tailwind:使用TailwindCSS在Svelter中构建Web应用程序的基本模板
05-29
带有 TailwindCSS 模板的 Svelte :ewe: 获取模板或项目 根据您的喜好选择复制还是分叉。 :clipboard: 复制 npx degit erianvc/svelte-tailwind my-app :fork_and_knife: 叉 单击此项目的 GitHub 页面上的Use this template按钮或。 :down_arrow: 安装依赖项 您需要使用。 cd my-app npm install :hammer_and_wrench: 用法 :test_tube: 发展 npm run dev :hammer: 生产建设 npm run build :handshake: 贡献 欢迎贡献，问题和功能要求！ 随时检查。 :star: 表达您的支持 给一个 :star: 如果这个项目对您有帮助！ :memo: 执照 该项目是麻省理工学院许可的。 该自述文件是使用 :red_heart: 通过自述文件md生成器
惊爆！10 分钟用 Svelte+Vite+TS+Melt - UI 搭好框架
最新发布
weixin_33289151的博客
06-02 83
每条路由都是一个普通的Svelte组件，包含标记、脚本、绑定等。任何Svelte组件都可以是路由。路由定义只是一个JavaScript字典（对象），其中键是一个带有路径（包括参数等）的字符串，值是路由对象。
Svelte-Tailwind:简单的设置即可将Svelte与Tailwind集成
05-22
带Tailwind CSS的Svelte模板 设置 使用Svelte设置Tailwind非常简单，只需安装必要的依赖项即可： npm i -D svelte-preprocess tailwindcss postcss postcss-load-config autoprefixer 创建您的配置文件 npx tailwindcss init -p 在rollup.config.js配置svelte-preprocess // ... import sveltePreprocess from 'svelte-preprocess' ; // ... export default { // ... plugins : [ svelte ( { preprocess : sveltePreprocess ( { postcss : true } ) ,
vite-svelte-typescript:Svelte + Vite 2 +打字稿+ TailwindCSS
03-10
vite-svelte-typescript:Svelte + Vite 2 +打字稿+ TailwindCSS
主打一个“小巧灵动”：Vite + Svelte
vivo互联网技术
12-27 1632
在研发小型项目时，传统的Vue、React显得太“笨重”。本文主要针对开发小型项目的场景，谈谈Vite+Svelte是如何让项目变得“小巧灵动”，并横向对比Svelte和Vue的性能表现，对二者的加载流程做详细分析。
vue3 + vite项目中集成tailwindcss
九段刀客的博客
05-08 576
style.css中加入。6 启动项目查看效果。
svelte-vite-daisyui-windicss
03-29
该模板应帮助您开始在Vite中使用Svelte和TypeScript进行开发。 推荐的IDE设置 + 。 需要一个正式的Svelte框架吗？ 查看 ，它也由Vite提供支持。 通过无服务器优先的方法在任何地方进行部署，并适应各种平台，并...
tailwindcss:Fix正在修复:warning:将Tailwind CSS添加到Svelte项目的命令
05-14
npx svelte-add tailwindcss # --jit :high_voltage: 添加到Vite 您必须从Vite支持的Svelte官方应用模板的全新副本开始，该模板当前是通过运行以下命令创建的： npm init @vitejs/app # Choose svelte or svelte-...
swind:使用Svelte和Tailwind构建UI库
03-26
诈骗用户界面 Swind UI代表Svelte Tailwind，它受到各种流行的UI组件（例如 ， 和 ）的启发。 为什么要使用UI界面？ 希望能够简化使用灵活使用的组件以及易于处理的可访问性和样式的组件创建应用程序的过程。 我们正在使用顺风css，但是我们可以使用对其进行调整，我们将找到用法，向您展示如何轻松设置样式。 你告诉我！ 大图片用法示例 < script > import { SwBox , SwAlert , SwButton } from ' swind-ui ' </ script > < SwBox borderWidth = " 1 " borderColor = " gray-lightest " <!-- you can choose with defined default color in tailwind config --> bgCo
svelte-vite-tailwind-template
03-22
svelte-vite-tailwindcss-template 这是Svelte项目模板的分支，用于启用Tailwindcss。有关更多信息，请参阅 。 要使用基于此模板创建一个新项目： npx degit lukem121/svelte-vite-tailwind-template svelte-app cd svelte-app 请注意，您将需要安装 开始吧 安装依赖项... cd svelte-app npm install
熔炼：UI框架，其材质组件使用Svelte和Tailwind CSS构建
02-04
熔炼 Smelte是一个使用Material Design规范（因此得名）在Svelte和Tailwind CSS之上构建的UI框架。 它带有许多组件和实用程序功能，可以轻松构建漂亮的响应式布局，同时还要确保捆绑包的大小和性能，这一切都要归功于Svelte。 安装 要开始使用，您需要使用您最喜欢的包管理器将Smelte添加到您的依赖项中 $ npm install smelte or yarn add smelte 然后添加Smelte Rollup插件（在svelte之后但在CSS之前）。 Webpack支持即将推出。 const smelte = require ( "smelte/ro
svelte-storybook-tailwind：Svelte，TailwindCSS和Storybook的入门模板。 您可以使用此模板轻松启动项目，而不必浪费时间为每个集成确定配置
02-03
Svelte，TailwindCSS和Storybook的入门模板 访问此网站以查看结果： // Quickstart npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project cd my-svelte-project yarn yarn dev yarn stories Svelte和TailwindCSS对于Frontend开发来说是一个很棒的组合，但是有时设置似乎有点不直观，特别是在尝试尝试这个很棒的组合时。 集成Storybook（这是用于UI组件开发和文档的另一个很棒的工具）时，没有明显的地方可以了解它的完成方式。 这个仓库就是为了解决这个问题！ 您可以使用此模板轻松启动项目，而不是浪费时间为每个集成确定配置。 你在这个仓库里得到什么 功能齐全的Svelte + TailwindCSS集成与独立Storybook的并行实现 具有5个基本附件的故事书 故事书中填充了Svelte + TailwindCSS的基本示例 插件 辅助功能附件 辅助功能附加组件-色盲仿真 动作插件 笔记插件
svelte-tailwind-template:最佳Svelte Tailwind模板
05-01
最佳Svelte + TailwindCSS模板 另一个Svelte + TailwindCSS模板，但是这次不烂 特征 与Webpack 5捆绑在一起 @apply和使用svelte组件样式标签的朋友，不需要lang=postcss .pcss文件中的内容相同 热模块更换 Sane重装时间-组件中的Tailwind为350 avg ms，常规组件css为250 avg ms。 在上限为2GHz的Ryzen 2500u上测试 使用@tailwindcss/jit获得非常好的性能（感谢WindiCSS和Girouette） 安装 NPM git clone https://github.com/non25/svelte-tailwind-template my-new-project # or with degit npx degit non25/svelte-tailwind-temp
**Svelte 与 Tailwind CSS 的完美结合**
gitblog_00658的博客
08-15 967
???? Svelte 与 Tailwind CSS 的完美结合 ???? ???? 项目介绍 在Web开发的领域中，我们总是在寻找能让开发过程更简洁高效的方式。今天，我要向大家介绍一款将Svelte与Tailwind CSS无缝融合的强大工具 —— svelte-add tailwindcss. 这款开源项目旨在帮助开发者轻松地在Svelte应用中集成Tailwind CSS，从而带来更加丰富和灵活的设计选项。...
Tailwind CSS 在 Svelte 项目中的应用指南
gitblog_00565的博客
08-13 941
Tailwind CSS 在 Svelte 项目中的应用指南 项目介绍 Tailwind CSS 是一个功能强大的实用程序优先 CSS 框架，它允许开发者通过组合各种实用程序类来快速构建用户界面。与传统 CSS 框架不同，Tailwind 不提供预设的组件样式，而是提供了一系列的原子类，这些类可以直接应用于 HTML 元素，从而实现高度定制化的设计。 项目快速启动 安装 Tailwind CSS ...
推荐：轻松为Svelte添加Tailwind CSS的利器！
gitblog_00039的博客
05-18 623
推荐：轻松为Svelte添加Tailwind CSS的利器！ 项目地址:https://gitcode.com/gh_mirrors/tail/tailwindcss 1、项目介绍 在前端开发中，Svelte和Tailwind CSS都是深受开发者喜爱的工具。它们各自提供了高效的状态管理和优雅的样式解决方案。现在，有了名为svelte-add/tailwindcss的开源项目，你可以更方便地将Ta...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值