Vue3를 사용하면 CSS 프레임워크-Unocss 구성을 시작하는 데 필요한 노력의 절반으로 두 배의 결과로 페이지 스타일을 작성할 수 있습니다.

소개: vue3를 사용하면 CSS 프레임워크-Unocss 구성을 시작하는 데 드는 노력의 절반으로 두 배의 결과로 페이지 스타일을 작성할 수 있습니다.

• Nuxt3 구성: https://github.com/unocss/unocss/tree/main/packages/nuxt
• 작성 주소: https://uno.antfu.me/

설치하다

yarn add -D @unocss/nuxt@0.45.29

구성

// 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`,
        }),
      ],
    ],
  },
});

사용 (약간의 테스트)

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

• 타사 구성 요소 라이브러리의 스타일을 설정하려면 "!"를 추가해야 합니다.

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