likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 18

这是大厂企业级项目架构系列的第七篇，这系列的文章如下： 这是大厂企业级项目架构系列的第六篇，这系列的文章如下：

本篇文章主要是关于样式方案的，我决定采用原子化的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';

使用

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

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

上面的text-5xl和text-pink-600就是windicss给我们提供的工具类，它给我们提供了很多的工具类可以使用，但是这么多名字肯定是记不住的，这个时候就可以借助vscode插件来给我们提示了

安装vscode插件

安装windicss intellisense

安装完成后在.vscode/settings.json中增加如下配置开启vscode的提示

"editor.quickSuggestions": {
    "strings": true
}

此时，我们使用工具类的时候，就可以用只能提示了，如下所示： 【大厂企业级项目架构】之样式方案

windicss配置

上面讲了windicss的安装和基本使用，你可以使用windicss提供的工具类完成大部分的样式，但是如果你想定制自己的样式，就要用到windicss的配置了。

举个例子，我上面的例子里面，用到了工具类text-pink-600，假如我的项目想修改这个text-pink-600，又或者我想新增一个没有的颜色mycolor，然后用的时候通过text-mycolor就可以使用我新增的颜色。这些情况下就需要去配置文件里面定制我们的样式了。

增加windicss配置文件

在项目根目录下新增windi.config.ts，内容如下

import { defineConfig } from 'vite-plugin-windicss';

export default defineConfig({
    // 通过darkMode可以开启暗黑模式
    // 有两个选项 class|media
    // media会自动开启暗黑模式
    // class需手动打开，就是说你需要在html标签下指定class="dark"
    darkMode: 'class',
    theme: {
        // extend继承默认的插件
        extend: {
            // 在这里修改颜色相关的样式
            colors: {
                // 这里会覆盖原先的text-pink-600，变成黄色
                pink: {
                    600: 'yellow',
                },
                // 这里是你新增的自定义颜色，当你使用text-mycolor或bg-mycolor等的时候，就会使用这个颜色
                mycolor: '#123456',
            },
        },
});

具体的配置选项可以去官网查看，然后根据自己的项目需要去配置就可以了。

需注意的是，修改配置之后，可能要重启项目才会生效

总结

本篇文章讲解了项目如何接入windicss，以及windicss的基本使用和配置，没有详细深入的讲解所有的功能特性，因为这需要等后续真正的进行页面开发的时候，根据实际需要用到哪些功能，哪些配置来讲。敬请期待吧。