前端项目练习——安装和简单使用Windi CSS

一、Windi CSS

它是一个CSS框架，便于管理和后期维护

Home | Windi CSS

二、安装

1.打开官方文档，选择Vite进行安装

2.进入项目终端，安装相关包

npm i -D vite-plugin-windicss windicss

3.在Vite.config.js文件中的vite配置中添加插件

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

4.在main.js（Vite入口文件）中引入

import 'virtual:windi.css'

 三、验证安装是否成功

1.在App.js文件中的<template>标签中添加<Button>组件

<template>
    <button>按钮</button>
</template>

查看效果：

 ​​​​​​​

2.打开官方文档，根据序号顺序依次点击查看，可随机选择一个样式进行验证

3.直接引入类名，即上图中序号5处的名字，将按钮字体变为红色,

<template>
<button class="text-red-500">按钮</button>
</template>

查看效果：

下图可以看出按钮文字已经变为红色，说明成功