vue2项目集成WindiCSS

在vue3项目中接触到了vben这个后台管理系统，看到这个项目使用到了WindiCss这个css框架，用起来非常顺畅，可以非常快地写一些class，比如margin-top:4px;可以写成class="mt-4px",margin:20px 40px可以写成 class="my-40px mx-20px"等等；

所以就想在以前vue2的项目上也集成这个css框架，便于旧项目更好、更快地写html，而不需要定义太多的css样式

windicss中文文档地址：cn.windicss.org/

官网中多种不同的集成方式，可以根据自身vue2项目的情况来安装；

由于我的项目是通过vue cli脚手架工具创建的，所以使用vue cli集成的方式

1.安装vue-cli-plugin-windicss插件

npm add -D vue-cli-plugin-windicss

或者直接在项目package.json中配置后安装依赖包npm install

"vue-cli-plugin-windicss": "~1.1.6",

2.在vue.config.js文件中配置插件

pluginOptions: {
    windicss: {
      preflight: false,
    },
  },

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

import 'windi.css'

4.使用

<div class="p-20px"></div> 即padding:20px;

5.安装vscode相关插件，更好地代码提示工具

在vscode插件库中安装Windi CSS Intellisense，提高windicss的开发体验，比如一些代码自动补全的功能，语法高亮等