关于使用webpack构建的vue项目，如何使用windicss

1、安装依赖

npm install windicss windicss-webpack-plugin -D

2、配置vue.config.js

在项目根目录下的vue.config.js中配置Windi CSS

const { defineConfig } = require('@vue/cli-service')
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [new WindiCSSWebpackPlugin()],
  }
})

3、在main.js中引入Windi CSS

import 'windi.css'

4、注意：不要使用

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin').default和

const { default: WindiCSSWebpackPlugin } = require('windicss-webpack-plugin')的方式引入，否则终端会报错：WindiCSSWebpackPlugin is not a constructor，导致项目无法运行；