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

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

这篇文章内容也相对简单，因为仅仅是讲如何接入使用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'; 

使用

经过上面的安装步骤后，你就可以开始写样式了，你可以随便找一个页面来验证是否已经引入成功