前端项目练习——安装和简单使用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文件中的