在electron中使用unocss和图标

公司需要做一个项目，需要投屏功能，实时显示比分和比赛结果，就用electron来实现一个投屏客户端。实现页面田比较简单，样式什么的就用unocss来写，方便快捷。图标就用一个开源库的，一直用的antdv的组件库，就用ant的图标。

本教程使用的是electron-vite脚手架

官方地址：cn-evite.netlify.app/guide/#%E6%…

vscode安装插件unocss,方便流畅的书写

安装unocss

官网地址：unocss.dev/integration…

安装

npm install -D unocss

vite配置 electron.vite.config

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [vue(), UnoCSS()]
  }
})

创建配置文件uno.config.ts

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

项目引入unocss main.ts

import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:uno.css'

createApp(App).mount('#app')

安装图标

图标查询网站：icones.js.org/

安装图标查询：www.npmjs.com/ 输入：@iconify-json查询

我选择的ant的图标:www.npmjs.com/package/@ic…

安装

npm i -D  @iconify-json/ant-design #ant的图标

配置

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetUno,
  presetIcons
} from 'unocss'
export default defineConfig({
  presets: [
    presetAttributify(),
    presetUno(),
    //自动引入图标库
    presetIcons({
      scale: 1.2,
      warn: true
    })
  ]
})

使用 i-+icones查询出来的名称即可

  <div i-ant-design:account-book-outlined></div>

rem转px

默认unocss是使用的rem，1是0.25rem

<script setup lang="ts">
const ipcHandle = () => window.electron.ipcRenderer.send('ping')
</script>

<template>
  <div class="text-2xl mt-10">测试unocss的rem</div>
  <div i-ant-design:account-book-outlined></div>
</template>

安装

npm i -D @unocss/preset-rem-to-px

配置

// uno.config.ts
import { defineConfig, presetAttributify, presetUno, presetIcons } from 'unocss'
//预设rem转px
import presetRemToPx from '@unocss/preset-rem-to-px'
export default defineConfig({
  presets: [
    presetAttributify(),
    presetUno(),
    //自动引入图标库
    presetIcons({
      scale: 1.2,
      warn: true
    }),
    // mt-1会转换为margin-top:1px;
    presetRemToPx({
      baseFontSize: 4
    })
  ]
})

使用@apply

官方说明 ：unocss.dev/presets/ico… 使用引方法可以让我们的html看着更舒服

安装前的效果

安装

npm i -D @unocss/transformer-directives

配置：

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetUno,
  presetIcons,
  transformerVariantGroup
} from 'unocss'
//预设rem转px
import presetRemToPx from '@unocss/preset-rem-to-px'
//可以使用@apply @screen theme函数
import transformerDirective from '@unocss/transformer-directives'
export default defineConfig({
  presets: [
    presetAttributify(),
    presetUno(),
    //自动引入图标库
    presetIcons({
      scale: 1.2,
      warn: true
    }),
    // mt-1会转换为margin-top:1px;
    presetRemToPx({
      baseFontSize: 4
    })
  ],
  //函数使用
  transformers: [transformerVariantGroup(), transformerDirective()]
})

完整配置

// uno.config.ts

//预设rem转px
import presetRemToPx from '@unocss/preset-rem-to-px'
//可以使用@apply @screen theme函数
import transformerDirective from '@unocss/transformer-directives'
import {
  defineConfig,
  presetAttributify,
  presetUno,
  transformerVariantGroup,
  presetIcons
} from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(),
    presetUno(),
    // mt-1会转换为margin-top:1px;
    presetRemToPx({
      baseFontSize: 4
    }),
    //自动引入图标库
    presetIcons({
      scale: 1.2,
      warn: true
    })
  ],
  //函数使用
  transformers: [transformerVariantGroup(), transformerDirective()],
  //自定义配置项
  rules: [
    // 官网规则可以自定义转换
    /**以下官网规则可自定义转换*/
    /*例如 m-1转换为margin:0.25rem */
    //[/^m-( \d+)$/，([，d])=>({margin:`${d / 4}rem`})]，
    //[/^p-(\d+)$/, match => ({padding: `${match[1]/ 4}rem`})],
    //[/^p-(\d+)$/, match => ({padding: `${match[1]/ 4}rem`})],
  ],
  //自定义属性 一个属性可以对应多个unocss类值
  shortcuts: [
    {
      //垂直水平居中
      'flex-center': 'flex justify-center items-center',
      //竖着居中
      'flex-center-col': 'flex justify-center items-center flex-col',
      //元素最后对齐
      'flex-end': 'flex justify-end items-center',
      //元素两这对齐
      'flex-between': 'flex justify-between items-center'
    }
  ]
})