Vue3/Csswindicss在Vue3中的安装与使用

Posted 2022-12-31

一、安装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>