【大厂企业级项目架构】之样式方案

最新推荐文章于 2025-10-24 11:19:40 发布

原创

最新推荐文章于 2025-10-24 11:19:40 发布 · 410 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一种新的样式方案——windicss，包括其安装、使用、vscode插件安装以及基本配置。文章展示了如何将windicss集成到项目中，并提供了配置文件示例，强调了配置的自定义性和性能优势。尽管只涉及入门内容，但为后续更深入的页面开发和样式管理奠定了基础。

本篇文章主要是关于样式方案的，我决定采用原子化的css方案windicss。至于为什么，仅仅是因为我没用过，想试试看，因为是新项目，没有负担，也想看看项目有了一定的规模之后，究竟是这种方案好，还是传统的方案更加易于维护。

这篇文章内容也相对简单，因为仅仅是讲如何接入使用windicss，至于具体详细的使用，得等到后续真正的页面开发当中穿插来讲。

vite集成windicss相当简单，只需要安装一个vite插件就可以了，而且性能也相当不错，官网的说法是比tailwind快20~100倍。

pnpm i -D vite-plugin-windicss

安装完之后，需要在vite.config.js中使用该插件，如下所示

import windicss from 'vite-plugin-windicss';
// ....其他忽略
// 在这里使用插件
plugins: [windicss()],

最后还需要在项目入口文件main.ts中引入virtual:windi.css

import 'virtual:windi.css';

经过上面的安装步骤后，你就可以开始写样式了，你可以随便找一个页面来验证是否已经引入成功了，我这里举个例子，我的页面内容如下：

<template><div class="text-5xl text-pink-600"> 测试windicss </div>
</template>