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

 更新时间:2023年07月04日 11:34:18   作者:头发掉完就不学了  
这篇文章主要给大家介绍了关于如何在vue中使用unocss以及基本使用方法的相关资料,unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码,需要的朋友可以参考下

什么是unocss?

unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码。

unocss的优点

  • 它可以让你快速地开发和原型设计,而不需要考虑CSS的细节。
  • 它可以让你的CSS文件更小,因为它只生成你用到的工具类。
  • 它可以让你的CSS更一致,因为它遵循一套预设的规则和变量。
  • 它可以让你的CSS更灵活,因为它支持自定义工具类,变体,指令和图标。
  • 它可以让你的CSS更易于维护,因为它避免了样式冲突和重复代码。

安装unocss

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

在打包工具配置文件中配置插件

vite配置

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

在webpack5中配置

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

在webopack4中配置

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

创建一个`uno.config.ts 配置文件

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

在main.ts中使用

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

安装vscode插件unocss

如图所示

在settings.json中配置,这里的作用是写css的时候带智能提示

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

配置完后如下图

查询交互式文档

刚开始入手的小白怎么办,咱啥也母鸡啊,那就查看unocss的交互式文档

在其中输入属性获取类名。如图所示

基本用法(以下都是一些常用例子,并不代表只有这些)

unocss支持用预设单位,也可以自定义单位,例如

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

padding相关用法

.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;
}

magin相关用法

margin和padding用法一模一样

例如:

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

flex相关用法

用法大同小异,下面是部分常用例子

.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' }]
 ]
})

如上配置之后,在css中检测到m-1就会编译成

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

这样就可以修改unocss预设的大小,例如m-1会编译成

 .m-1 { margin: 10px; }

快捷方式

在vscode中我们都会有用到快捷键一键生成代码,unocss也不例外,假如你有个盒子,里面的内容需要垂直居中,那么就可以定义为

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;
}

总结

unocss刚上手可能有点不习惯,写多了再加上unocss的插件有语法智能提示,能使我们工作效率大大提高,接下来就是unocss熟练度的问题了。加油,看这篇文章的陌生人。

相关文章

  • Vue+Spring Boot简单用户登录(附Demo)

    Vue+Spring Boot简单用户登录(附Demo)

    这篇文章主要介绍了Vue+Spring Boot简单用户登录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue 3.0 前瞻Vue Function API新特性体验

    Vue 3.0 前瞻Vue Function API新特性体验

    这篇文章主要介绍了Vue 3.0 前瞻Vue Function API新特性体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue3中Teleport和Suspense的具体使用

    vue3中Teleport和Suspense的具体使用

    本文主要介绍了vue3中Teleport和Suspense的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    这篇文章主要介绍了使用Vue+Django+Ant Design做一个留言评论模块,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • VUE配置history路由模式配置详细举例

    VUE配置history路由模式配置详细举例

    这篇文章主要给大家介绍了关于VUE配置history路由模式配置的相关资料,History模式是Vue路由的另一种模式,在History模式下URL中的路径不再使用#符号,而是直接使用正常的路径形式,需要的朋友可以参考下
    2023-12-12
  • 从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

    从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

    今天小编就为大家分享一篇从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3 style CSS 变量注入的实现

    Vue3 style CSS 变量注入的实现

    本文主要介绍了Vue3 style CSS 变量注入的实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • vue自定义组件实现双向绑定

    vue自定义组件实现双向绑定

    这篇文章主要为大家详细介绍了vue自定义组件实现双向绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • vue 动态设置浏览器标题的方法详解

    vue 动态设置浏览器标题的方法详解

    这篇文章主要为大家介绍了vue动态设置浏览器标题的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • vue实现websocket客服聊天功能

    vue实现websocket客服聊天功能

    这篇文章主要为大家详细介绍了vue实现websocket客服聊天功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论