Vue3+Vite项目中 使用WindiCSS.

之前工作有了解过根据类名来写元素的样式，一听就发出疑问：这样写项目可读性恐怕不是很好吧。。。

 

 之后来到杭州工作后，开始使用WindiCSS后发现 真香！！！

 由于近期所写的项目都是自己一个人开发的 组长说可以大胆点来！我就边学习边在项目中使用：

 近期项目都使用的是 Vue3+Vite+TS开发，所以下文就按照这个前提来说明～

首先下载WindiCSS这个插件

npm i -D vite-plugin-windicss windicss

在vite.config.ts文件下添加插件

import WindiCSS from 'vite-plugin-windicss'

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

最后在入口ts文件 mian.ts添加

import 'virtual:windi.css'

如果想让开发体验更上一层楼 可以安装VScode里面WindiCSS的专属插件：

WindiCSS IntelliSense
// 可以直接输入WindiCSS关键词搜索

 

 安装好这个插件日常开发中就有智能提示了～