Vue3 allows you to write page styles with twice the result with half the effort CSS framework-Unocss configuration to get started

Introduction: vue3 allows you to write page styles with twice the result with half the effort CSS framework-Unocss configuration to get started

• Nuxt3 configuration: https://github.com/unocss/unocss/tree/main/packages/nuxt
• Writing address: https://uno.antfu.me/

Install

yarn add -D @unocss/nuxt@0.45.29

configuration

// nuxt.config.ts
export default defineNuxtConfig({
    
    
  modules: ['@unocss/nuxt'],
  unocss: {
    
    
    uno: true,					//激活unocss
    attributify: true,	//激活属性化模式
    shortcuts: [				//自定义快捷方式
      {
    
     flexc: 'flex items-center justify-center' },
      {
    
     flexb: 'flex items-center justify-between' },
      {
    
     btn: 'rounded-5px text-center cursor-pointer select-none' },
      {
    
     'text-btn': 'text-center cursor-pointer select-none' },
    ],
    rules: [						//自定义规则
      [
        /^truncate-(\d+)$/,
        ([, d]) => ({
    
    
          overflow: 'hidden',
          display: '-webkit-box',
          'text-overflow': 'ellipsis',
          '-webkit-line-clamp': d,
          '-webkit-box-orient': 'vertical',
        }),
      ],
      [
        /^center-text-(\d+)$/,
        ([, d]) => ({
    
    
          height: `${
      
      d}px`,
          'align-items': 'center',
          'line-height': `${
      
      Number(d) - 2}px`,
        }),
      ],
      [
        /^wh-(\d+)$/,
        ([, d]) => ({
    
    
          width: `${
      
      d}px`,
          height: `${
      
      d}px`,
        }),
      ],
    ],
  },
});

use (little test)

<div color-red bg-blue font-600 fs-30 w-100 h-100 flexc>CSDN</div>

• If you want to set the style of the third-party component library, you need to add "!"

<a-button w-20px color-green! bg-red!>按钮</a-button>