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>