如何在vue中使用unocss以及基本使用方法
更新時(shí)間：2023年07月04日 11:34:18 作者：頭發(fā)掉完就不學(xué)了
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個(gè)即時(shí)的原子CSS引擎,它可以讓你用簡(jiǎn)短的類名來(lái)控制元素的樣式,而不需要寫復(fù)雜的CSS代碼,需要的朋友可以參考下
什么是unocss？
unocss是一個(gè)即時(shí)的原子CSS引擎，它可以讓你用簡(jiǎn)短的類名來(lái)控制元素的樣式，而不需要寫復(fù)雜的CSS代碼。
unocss的優(yōu)點(diǎn)
- 它可以讓你快速地開發(fā)和原型設(shè)計(jì)，而不需要考慮CSS的細(xì)節(jié)。
- 它可以讓你的CSS文件更小，因?yàn)樗簧赡阌玫降墓ぞ哳悺?/li>
- 它可以讓你的CSS更一致，因?yàn)樗裱惶最A(yù)設(shè)的規(guī)則和變量。
- 它可以讓你的CSS更靈活，因?yàn)樗С肿远x工具類，變體，指令和圖標(biāo)。
- 它可以讓你的CSS更易于維護(hù)，因?yàn)樗苊饬藰邮經(jīng)_突和重復(fù)代碼。
安裝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',
},
},
}創(chuàng)建一個(gè)`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的時(shí)候帶智能提示
"editor.quickSuggestions": {
"strings": true,
"other": true,
"comments": true,
},配置完后如下圖
查詢交互式文檔
剛開始入手的小白怎么辦，咱啥也母雞啊，那就查看unocss的交互式文檔
在其中輸入屬性獲取類名。如圖所示
基本用法（以下都是一些常用例子，并不代表只有這些）
unocss支持用預(yù)設(shè)單位，也可以自定義單位，例如
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-10rpx {
padding-left: 10rpx;
padding-right: 10rpx;
}padding相關(guān)用法
.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相關(guān)用法
margin和padding用法一模一樣
例如：
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}flex相關(guān)用法
用法大同小異，下面是部分常用例子
.flex {
display: flex;
}
.flex-1 {
flex: 1 1 0%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}文本相關(guān)用法
.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;
}配置用法
靜態(tài)規(guī)則配置
export default defineConfig({
rules: [
['m-1', { margin: '0.3rem' }]
]
})如上配置之后，在css中檢測(cè)到m-1就會(huì)編譯成
.m-1 { margin: 0.3rem; }動(dòng)態(tài)規(guī)則
export default defineConfig({
rules: [
/** match[1]代表獲取到的值 */
[/^m-(\d+)$/, match => ({ margin: `${+match[1] * 10}px` })],
[/^p-(\d+)$/, match => ({ padding: `${+match[1] * 10}px` })],
]
})這樣就可以修改unocss預(yù)設(shè)的大小，例如m-1會(huì)編譯成
.m-1 { margin: 10px; }快捷方式
在vscode中我們都會(huì)有用到快捷鍵一鍵生成代碼，unocss也不例外，假如你有個(gè)盒子，里面的內(nèi)容需要垂直居中，那么就可以定義為
export default defineConfig({
shortcuts: [
'flex-center': 'flex items-center justify-center',
]
})動(dòng)態(tài)快捷方式
export default defineConfig({
shortcuts: [
[/^base-border-(.*)$/, match => `border-1 border-style-dashed border-${match[1]}`],
]
})編譯結(jié)果
.base-border-red {
border-width: 1px;
--un-border-opacity: 1;
border-color: rgba(248, 113, 113, var(--un-border-opacity));
border-style: dashed;
}總結(jié)
unocss剛上手可能有點(diǎn)不習(xí)慣，寫多了再加上unocss的插件有語(yǔ)法智能提示，能使我們工作效率大大提高，接下來(lái)就是unocss熟練度的問(wèn)題了。加油，看這篇文章的陌生人。
您可能感興趣的文章:
相關(guān)文章
跨域是指當(dāng)一個(gè)資源去訪問(wèn)另一個(gè)不同域名或者同域名不同端口的資源時(shí),就會(huì)發(fā)出跨域請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于vue使用vite配置跨域以及環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded解決辦法
這篇文章主要給大家介紹了關(guān)于element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue路由跳轉(zhuǎn)后刷新指定頁(yè)面的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了VUE記賬憑證模塊組件的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式
這篇文章主要介紹了ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定的簡(jiǎn)單實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
使用vue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)?lái)的使用vue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)，實(shí)現(xiàn)效果是input未輸入值時(shí)，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧2017-09-09
在Vue項(xiàng)目開發(fā)中,.env文件用于配置不同環(huán)境（開發(fā)、測(cè)試、生產(chǎn)）的環(huán)境變量,通過(guò)不同的文件如.env.development和.env.production來(lái)區(qū)分環(huán)境配置,Vue會(huì)根據(jù)運(yùn)行命令自動(dòng)加載對(duì)應(yīng)的配置文件,如使用npm run serve會(huì)加載.env.development2024-11-11
這篇文章主要介紹了使用vue-antd動(dòng)態(tài)切換主題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10