如何在vue中使用unocss以及基本使用方法

pnpm add -D unocss
// or
yarn add -D unocss
// or
npm install -D unocss

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
  plugins: [
    UnoCSS(),
  ],
  optimization: {
    realContentHash: true,
  },
}

// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
  plugins: [
    UnoCSS(),
  ],
  css: {
    extract: {
      filename: '[name].[hash:9].css',
    },
  },
}

// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
  // ...UnoCSS options
})

// main.ts
import 'virtual:uno.css'

 "editor.quickSuggestions": {
    "strings": true,
    "other": true,
    "comments": true,
  },

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10rpx {
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.p-t-1 {
  padding-top: 0.25rem;
}
.p-b-1 {
  padding-bottom: 0.25rem;
}
.p-l-1 {
  padding-left: 0.25rem;
}
.p-r-1 {
  padding-right: 0.25rem;
}
.p-1 {
  padding: 10px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.flex {
  display: flex;
}
.flex-1 {
  flex: 1 1 0%;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}

.color-#999 {
  --un-text-opacity: 1;
  color: rgba(153, 153, 153, var(--un-text-opacity));
}
.text-12px {
  font-size: 12px;
}
.break-all {
  word-break: break-all;
}

export default defineConfig({
 rules: [
   ['m-1', { margin: '0.3rem' }]
 ]
})

.m-1 { margin: 0.3rem; }

export default defineConfig({
  rules: [
    /** match[1]代表获取到的值 */
    [/^m-(\d+)$/, match => ({ margin: `${+match[1] * 10}px` })],
    [/^p-(\d+)$/, match => ({ padding: `${+match[1] * 10}px` })],
  ]
})

 .m-1 { margin: 10px; }

export default defineConfig({
  shortcuts: [
   'flex-center': 'flex items-center justify-center',
  ]
})

export default defineConfig({
 shortcuts: [
    [/^base-border-(.*)$/, match => `border-1 border-style-dashed border-${match[1]}`],
  ]
})

.base-border-red {
  border-width: 1px;
  --un-border-opacity: 1;
  border-color: rgba(248, 113, 113, var(--un-border-opacity));
  border-style: dashed;
}