【大厂企业级项目架构】之样式方案
这是大厂企业级项目架构
系列的第七篇,这系列的文章如下:
这是大厂企业级项目架构
系列的第六篇,这系列的文章如下:
- 【大厂企业级项目架构】之项目搭建和代码规范
- 【大厂企业级项目架构】之提交规范
- 【大厂企业级项目架构】之vite基础配置与多环境区分
- 【大厂企业级项目架构】之项目接入路由
- 【大厂企业级项目架构】之网络请求封装和接口管理
- 【大厂企业级项目架构】之状态管理
- 【大厂企业级项目架构】之样式方案
本篇文章主要是关于样式方案的,我决定采用原子化的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
的基本使用和配置,没有详细深入的讲解所有的功能特性,因为这需要等后续真正的进行页面开发的时候,根据实际需要用到哪些功能,哪些配置来讲。敬请期待吧。
转载自:https://juejin.cn/post/7134358535877427231