0
点赞
收藏
分享

微信扫一扫

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


一、安装windicss

npm i -D vite-plugin-windicss windicss

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

 二、然后,在你的 Vite 配置中添加插件:

vite.config.js

import WindiCSS from 'vite-plugin-windicss'

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

【Vue3/Css】windicss在Vue3中的安装与使用_前端_02

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'

【Vue3/Css】windicss在Vue3中的安装与使用_前端_03

 四、在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>

【Vue3/Css】windicss在Vue3中的安装与使用_前端_04

 

举报

相关推荐

0 条评论