学习目标：Windi CSSS 使用

提示：Windi CSSS 在vue3 中简单使用

官网地址：https://cn.windicss.org

1，安装 Windi CSSS

npm i -D vite-plugin-windicss windicss

2，项目中配置 Windi CSSS vite为例在vite.config.js 中配置

import WindiCSS from 'vite-plugin-windicss'export default defineConfig({plugins: [vue(),WindiCSS()]})

3，vscode 中安装 Windi CSSS 插件

4，使用示例

1, clss中直接引用 样式
<button class="flex items-center justify-center flex-col" @click="handelLogin">登录</button>2, @apply 引用样式
<button class="flex-class" @click="handelLogin">登录</button><style scoped>
.flex-class {@apply flex items-center justify-center flex-col;
}
</style>

vue 中使用 Windi CSSS 样式库相关推荐

vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
【Vue】class style：Vue中的两种样式处理方法
class属性 1.基本的class使用 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
Vue中使用 class 类样式的方式
在vue中为我们提供了几种方式来使用class类的样式 1. 布尔值我们先正常在 style 标签中书写一个类名为 active的样式 <style>.active{color: r ...
Vue中设置class类样式
vue中通过属性绑定为元素设置class类样式 vue中class类样式的4种绑定方式 1.数组 2.三元表达式 3.数组嵌套对象 4.直接使用对象 vue中class类样式的4种绑定方式 1.数组 ...
vue中使用Font Awesome图标库
Font Awesome地址:Font Awesome 中文网 – | 字体图标 1.vue中安装font awesome:npm install font-awesome --save npm in ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
vue中改变v-html元素样式
<div class="brand-article" v-html="content.article"></div> 实现样式: 设计图 ...

vue 中使用 Windi CSSS 样式库

学习目标：Windi CSSS 使用

vue 中使用 Windi CSSS 样式库相关推荐

最新文章

热门文章