记一次在vue3中使用unocss

项目环境:vue3+webpack

使用步骤:

一、安装插件

1.安装基础插件 : npm i -D unocss @unocss/webpack
2.安装要用到图标的插件
如下图如果想使用这个页面的logo就需要安装如下命令：
npm i -D @unocss/preset-icons @iconify-json/logos ``

二、配置

vue.config.js 中对Unocss进行如下配置

const { defineConfig } = require('@vue/cli-service');
const Unocss = require('@unocss/webpack').default;
const {presetIcons,presetUno} = require('unocss')
module.exports = defineConfig({
lintOnSave:false,
transpileDependencies: true,
configureWebpack:{
  plugins:[
    Unocss({
      presets: [
        presetIcons({ /* options */ }),
        presetUno()/*使unocss中关于文本的样式生效*/
        // ...other presets
      ],
    })
  ]
}
})

此外,还需在main.js中按这种方式引入： import 'uno.css

参考：
unplugin-auto-import和unocss使用