【Vue3/Css】windicss在Vue3中的安装与使用

一、安装windicss

npm i -D vite-plugin-windicss windicss

 二、然后，在你的 Vite 配置中添加插件：

vite.config.js

import WindiCSS from 'vite-plugin-windicss'

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: 
  [vue()],
  WindiCSS(),
})

三、然后，在main.js中导入

import 'virtual:windi.css'

 四、在app.vue中测试一下

  <div>
    <button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white" font="mono light" p="y-2 x-4"
      border="2 rounded blue-200">
      windi-css-按钮
    </button>
    
  </div>