使用Windi CSS（基于vue-cli）

Kw_Chng

已于 2023-12-25 23:49:52 修改

阅读量1.6k

点赞数 8

文章标签： css 前端

于 2023-12-25 22:29:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43526403/article/details/135210433

版权

本文介绍了如何使用vue-cli创建Vue项目并集成WindiCSS，包括自动化安装、配置过程，以及如何自定义颜色。还提到了解决因系统限制可能出现的错误和VScode插件WindiCSSIntelliSense的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先创建vue项目

利用脚手架vue-cli创建，根据需求设置vue版本、babel等，无特别要求直接用默认的vue2或vue3就行

vue create 项目名

2、运行vue项目，利用vue-cli安装Windi CSS

官网指导：Vue CLI 集成 | Windi CSS

我的经历：直接终端输入以下命令即可自动安装，且在main.js文件会自动引入，也无需在vue.config.js中配置了才能使用，有特别定制的可以配置，不需要特别定制的可以不配置

vue add windicss

【注意】这一步可能会报错：vue : 无法加载文件......，解决方法看：vue : 无法加载文件 F:\nodejs\vue.ps1，因为在此系统上禁止运行脚本。_vue无法加载文件-优快云博客

VS code插件：WindiCSS IntelliSense，可以辅助自己使用

3、工具类

3.1、颜色

背景色（background-color）：bg-颜色单词-数字（数字代表颜色的饱和度和亮度，数字一定要写，不然无色，见颜色 | Windi CSS）

text：text-颜色：可以不写数字

自定义颜色：

如果项目里没有windi.config.js文件就新增一个，在windi.config.js里配置：

import colors from 'windicss/colors'

export default {
  theme: {
    extend: {
      colors: {
        lalablue: colors.blue,  // 颜色新名字：colors里的颜色名字
      },
    },
  },
}


使用：
原始：bg-blue-500
改名后：bg-lalablue-500