Vite+Vue开发常用库(持续更新)

Vite+Vue开发常用库

Windicss

官方网站
npm地址
github地址

介绍

Windi CSS是一个高效的CSS框架，它使用类似于Tailwind CSS的原子类命名约定，以提供快速、简洁和可维护的样式开发体验。Windi CSS通过使用类名缩写来定义样式属性，并通过JIT（即时编译）技术将这些类名转换为实际的CSS规则。这种设计使得开发人员可以快速构建样式，而无需手动编写大量的CSS代码。

安装

npm install windicss

使用

在main.js文件中引入css样式

import "virtual:windi.css";

以下是些许简单示例,详情请浏览官方网站

//适配父容器宽高
<div class="w-full h-full">
</div>

//flex布局
<div class="flex item-center">
<div>

在style中使用

<style scoped>
  .border {
    @apply relative border-[1px] border-gray-200 m-[2.8px] p-[2px] shadow-dark-50 shadow shadow-gray-300;
  }
</style>

Vite-plugin-windicss

npm地址
github地址

介绍

windicss的vite构建插件

安装

npm i vite-plugin-windicss --save-dev

使用

在vite.config.js文件中引入,没有则新建

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import windicss from "vite-plugin-windicss";

export default defineConfig({
  //其他代码
  plugins: [vue(), windicss()]
});

Less

官方网站
中文网站
npm地址
github地址

介绍

CSS预处理语言

安装

npm install less

使用

<style lang="less" scoped>
  //变量定义
  @item-size: 70px;
</style>