UnoCss使用

已于 2023-12-11 15:04:27 修改
阅读量1.6k 收藏 19
点赞数 22
分类专栏： css 文章标签： vue.js 前端 css
于 2023-12-07 16:06:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60053942/article/details/134858038
版权

UnoCSS: The instant on-demand Atomic CSS engine
样式文档

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

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

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

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

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

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

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

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

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

  • 使用 Ant Design Vue 时， unocss 的重置样式让，a-button 的默认按钮变透明
    • 在 main.ts 中引入 import '@unocss/reset/tailwind-compat.css'
    • 而不是 import '@unocss/reset/tailwind.css'
    • 即可解决
Evan-Sky
关注
  • 22
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp+vue3+unocss示例，解压即用 已经各种配置好了的模板，导入Hbuilder课直接运行
02-22
除去的安装配置繁琐操作，直接解压导入HbuilderX就可以用，完全可以直接当初始unocss项目。 vite.config.js、unocss.config.js...项目class已经分好类，涵盖了大部分class无需在官网搜索，可以直接复制当参考文档使用。
第三章 使用UnoCSS原子化CSS
天界程序员的博客
11-20 7670
UnoCSS的GitHub地址UnoCSS的文档地址原子样式也有很多选择，最著名的就是 。 虽然好，但是性能上有一些不足。由于 会生成大量样式定义。全量的 文件往往体积会多至数 。这个对于页面性能是完全不可接受的。如果在开发时进行动态的按需剪裁，又会影响编译性能，降低开发体验。为了解决性能问题，开源界一个叫做 的大神设计了 。 是一个拥有高性能且具灵活性的即时原子化 引擎，可以兼顾产物体积和开发性能。引入 样式实现组件属性定制按钮样式实现【Icon图标按钮】 其中的 是字体图标库文件名： 下面就
unocss使用&问题记录
u014632228的博客
07-10 3721
unocss使用与常见问题
解决Unocss/Windcss/Tailwind样出现‘Unknown at rule @applyscss(unknownAtRules)’警告
最新发布
china-quanda
04-17 540
@apply 是 CSS 中的一个功能，它允许您将一组样式规则应用于一个选择器。这是一种实验性质的功能，并非所有的 CSS 解析器都支持它，特别是当你使用 PostCSS 和一些Unocss/Windcss/Tailwind CSS工作时。 在 VSCode 中遇到 Unknown at rule @applyscss(unknownAtRules) 的信息，可能是因为您的编辑器或其内置的 SCSS Linter 并不识别这一规则。
BERT大火却不懂Transformer？读这一篇就够了 原版 可视化机器学习 可视化神经网络 可视化深度学习...20201107
kyle1314608的博客
07-26 1717
https://jalammar.github.io/illustrated-transformer/ The Illustrated Transformer Discussions:Hacker News (65 points, 4 comments),Reddit r/MachineLearning (29 points, 3 comments)Translations...
Day 1 Vue 页面框架
来往
10-23 938
现在前端框架越来越像后端了，特别是TypeScript这样的语言出现后，开发前端的体验跟后端渐渐接近了。当然，作为一个后端，直接上手前端，还是有很多坑要填的。 这篇文章就是从后端入手前端时踩过的坑，算是小白指南的一种吧。
unocss配置
weixin_44177413的博客
12-06 2345
unocss使用
UnoCSS入门学习笔记
o_u_c_h的博客
07-03 3378
UnoCSS入门学习笔记，含搭建，适合快速上手和入门学习。
UnoCSS
qq_44167845的博客
06-30 526
考虑到在开发过程中，这些工具 CSS 的并不经常变化，UnoCSS 通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到相同的实用工具类时，它可以绕过整个匹配和生成的过程。该预设尝试提供流行的功能优先框架（包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等）的共同超集。直接就可以看到所有的原子类，具体某个组件中的原子类，打包后的体积等信息。（Windi CSS）都是有效的。
原子CSS引擎——unocss
程序员成长指北
09-14 3384
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群什么是unocssunocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。当然，原子样式也有很多选择，最著名的就是 Tailwind。但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些...
unocss 基础用法
热门推荐
halo1416的博客
06-12 1万+
unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。当然，原子样式也有很多选择，最著名的就是Tailwind。但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足。扩展：什么是原子化原子化​​CSS​​​是一种​​CSS​​架构方式，其支持小型、单一用途的类，其名称基于视觉功能。
原子化CSS：Unocss的使用
q1003675852的博客
12-07 2253
首先，让我们为 原子化 CSS (Atomic CSS) 给出适当的定义：John Polacek 在 文章《 Let’s Define Exactly What Atomic CSS is 》中写道：译文：原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。有些人可能会称其为函数式 CSS，或者 CSS 实用工具。color: red;
一个Hbuilder的UnoCss的快速使用模板(含图标版)
02-25
一个UnoCss的快速使用模板 第一次使用需要安装依赖 npm i 项目图标库使用了@iconify 可根据需要在unocss.config.js中添加 库名: () => import('@iconify-json/库名').then((i) => i.icons) 另外你还可以添加预设 #...
uniapp 开发模板由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI
04-03
unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，...
Zeus-admin：基于 vue3 + vite4 + unocss 的后台管理系统界面.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。测试代码可运行。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者...
这是一个基于Vue3、Vite3、TypeScript、NaiveUI和UnoCSS的清新优雅的中后台模板
04-07
这是一个基于Vue3、Vite3、TypeScript、NaiveUI和UnoCSS的清新优雅的中后台模板。它提供了一个现代化的用户界面，适用于中后台管理系统的开发。这个模板使用了最新的前端技术，具有响应式设计和丰富的组件库，可以...
【unocss】apply聚合语法，unocss配置
Minf的博客
09-15 1123
最近在使用unocss时，我感觉原子化CSS把这些类名堆在一个标签里，实在谈不上精致美观，那我们有没有办法将这些样式类名搬到style里呢？有的，unocss、tailwindCSS都给出了一种语法#apply。
一文尽览 | 首篇Transformer在3D点云中的应用综述（检测/跟踪/分割/降噪/补全）...
CV_Autobot的博客
10-19 1844
Transformer 一直是自然语言处理 (NLP) 和计算机视觉 (CV) 的核心。NLP 和 CV 的巨大成功激发了研究者对 Transformer 在点云处理中的使用的探索。但是，Transformer如何应对点云的不规则性和无序性？Transformer 对不同的 3D 表示（例如点云或体素）的适用性如何？Transformer 对各种 3D 处理任务的能力如何？到目前为止，还没有对这些问题的研究进行系统的调查。论文全面概述了用于 3D 点云分析的 Transformer算法。
React项目 - 几种CSS实践
weixin_34235105的博客
11-08 296
前言团队在使用react时，不断探索，使用了很多不同的css实现方式，此篇blog总结了，react项目中常见的几种css解决方案：inline-style/radium/style-component，只列举了团队项目中用过的一下实现方式，还有其他的不过多展开 css的不足样式与状态相关的情况越来越多，需要动态、能直接访问组件state...
unocss实用插件
01-18
Unocss 是一个实用的插件，它是一个原子化 CSS 框架。原子化 CSS 是一种 CSS 的架构方式，它倾向于使用小巧且用途单一的 class，并且会以视觉效果进行命名。Unocss 可以根据你的 HTML 代码和使用的框架自动分析和提取出所需的样式，从而减少冗余的 CSS 代码。 使用 Unocss 的步骤如下： 1. 安装 Unocss：你可以使用 npm 或 yarn 进行安装。 2. 配置 Unocss：在你的项目中创建一个配置文件，指定需要分析的 HTML 文件和框架。 3. 构建样式：运行构建命令，Unocss 将会分析你的 HTML 文件和框架，并生成相应的原子化 CSS 样式。 4. 使用样式：将生成的 CSS 文件引入到你的项目中，并在 HTML 中使用相应的 class。 以下是一个使用 Unocss 的示例配置文件： ```javascript // unocss.config.js module.exports = { analyze: ['./src/**/*.html'], // 需要分析的 HTML 文件 framework: 'tailwindcss', // 使用的框架 theme: { extend: { colors: { primary: '#ff0000', }, }, }, }; ``` 通过以上配置文件，Unocss 将会分析项目中的 HTML 文件，并根据 Tailwind CSS 框架生成相应的原子化 CSS 样式。你可以根据需要扩展主题，添加自定义的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值