一、初识windicss

Windi Css官网

在windicss官网将其称之为下一代工具优先的CSS框架 如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。

在创建WindiCss时，作者曾说：

当项目越来越大时，使用Tailwind CSS最初编译的时间达到了3s，而热更新时的时间甚至超过了1s

通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供 更快的加载体验 以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）。

二、安装使用

windicss支持以下构建工具：

• vite
• webpack
• rollup
• POSTCSS
• CLI

windicss支持以下框架：

• nuxt
• vue cli
• gridsome
• svelte

对于一些编辑器，windicss也有相应的插件：

• VS Code
• WebStorm

因为我主要是用于适配我的个人博客项目，所以采用vite安装的同时使用其在vscode上的插件 vite安装命令如下

npm i -D vite-plugin-windicss windicss
复制代码

然后，在你的 Vite 配置(vite.config.js)中添加插件：

import WindiCSS from 'vite-plugin-windicss'
export default {
  plugins: [
    WindiCSS(),
  ],
}
复制代码

最后，在你的 Vite 入口文件(main.js)中导入 virtual:windi.css：

import 'virtual:windi.css'
复制代码

在vscode中安装windicss插件步骤如下：

综上所述，我们的windicss和插件就引入成功了，接下来终端执行相应的命令启动项目

PS C:\Users\My\Desktop\learn\blog-vue\blog-vue> npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> blog-vue@0.0.0 dev
> vite
  VITE v3.0.7  ready in 901 ms
  ➜  Local:   http://127.0.0.1:4000/
  ➜  Network: use --host to expose
复制代码

三、总结

至此windicss的安装就结束了，这个工具我也是第一次接触文章里就不献丑了