Vite+Vue开发常用库(持续更新)

Windi CSS 这是使用构建的的文档网站。 发展 安装依赖项： npm install 启动开发服务器： npm run dev 运行linter npm run lint 屏幕截图 :camera: 介绍

vite-plugin-windicss Vite的aka按需TailwindCSS 特征 :high_voltage: 快速-比Vite上的Tailwind快15〜20倍 :puzzle_piece: 按需CSS实用程序（与Tailwind CSS v2兼容） :package: 按需本地元素样式重置 :fire: 热模块更换（HMR） :leaf_fluttering_in_wind: 从tailwind.config.js加载配置 :handshake: 与框架无关-Vue，React，Svelte和Vanilla！ :page_facing_up: CSS @apply / @screen指令转换（也适用于Vue SFC的<style> ） 用法 安装 npm i vite-plugin-windicss -D # yarn add vite-plugin-windicss -D 将其添加到vite.config.js // vite.config.js import WindiCSS from 'vite-plugin-windi

运行开发服务器 git clone https://github.com/hasinhayder/windicss-boilerplate.git cd windicss-boilerplate yarn yarn dev 建造 yarn build

这是使用Vitepress构建的Windi CSS的文档网站。 Windi CSS这是使用Vitepress构建的Windi CSS的文档网站。 开发安装依赖项：npm install启动开发服务器：npm run dev运行linter npm run lint屏幕快照:camera:简介

温迪分析 的分析器工具。 浏览您的实用程序用法，了解您的设计系统，确定“不良做法”，以及更多！ 开始使用 在项目根目录下运行以下命令 npx windicss-analysis 分析报告将在 NPM 或者，您可以在本地安装以重复使用相同版本的本地windicss模块 npm i -D windicss-analysis // package.json { "scripts" : { "analysis" : "windicss-analysis" } } VS代码扩展 从Windi 的，它内置了此分析器。 在VS Code中使用Windi CSS打开项目 打开命令面板（⇧⌘P/ Ctrl + Shift + P） 运行命令： Windi CSS: Run & Open Analysis 请参阅第二个编辑器列中的分析器 在线预览 您可以预览分析仪本身的分析报告

Windi CSS智能感知 Windi CSS IntelliSense通过为Visual Studio Code用户提供自动完成，语法突出显示，代码折叠和构建等高级功能，增强了Windi开发体验。 安装 该插件打包了windicss编译器，因此您无需安装windicss即可使用它，并且还支持配置文件(tailwind|windi).config.(js|cjs|ts) 。 特征 自动完成 有关实用程序和变体的智能建议。 悬停预览 将鼠标悬停在完整CSS上以获取类名称。 语法高亮 突出显示实用程序，变体和重要内容。 色彩预览 预览颜色和光谱。 代码折叠 折叠过长的类以提高可读性。 编译命令 内置命令，一键操作。 扩展设置 设定值 类型 默认 描述 windicss.enableColorDecorators 布尔值 真的 启用颜色装饰器。 windicss.enableHoverPr

svelte-windicss预处理 苗条预处理器编译的基础上构建时编译器。 安装 npm install svelte-windicss-preprocess --save-dev 组态 Card.svelte 将svelte-windicss-preprocess添加到rollup.config.js 。 // rollup.config.js // ... export default { // ... plugins : [ svelte ( { // svelte-windicss-preprocess preprocess : require ( 'svelte-windicss-preprocess' ) . preprocess ( { config : 'tailwind.config.js' , // tailw

Windi CSS 下一代编译器。 如果您已经熟悉Tailwind CSS，请考虑使用Windi CSS作为它的替代方案。 它提供了更快的加载时间，并与Tailwind v2.0完全兼容，并具有更多功能。 否则，您可以将Windi CSS视为实用程序优先CSS库。 为什么选择Windi CSS？ :thinking_face: 作者的引文应说明他创建动机： 当我的项目变大并且包含大约数十个组件时，初始编译时间达到了3s，而热更新花费了超过1s。 @voorjar 通过扫描HTML和CSS并按需生成实用程序， 能够提供和快速的HMR开发，并且不需要清除生产。 在阅读有关它的更多信息。 整合方式 构架 包裹 版本 命令行界面 VSCode扩展 恶毒 卷起 Vue（Webpack） Card.svelte React 快来了... 角度的 快来了... 文献资料 :open_book: 检查。 讨论区 我