如何在vue中使用unocss以及基本使用方法
更新時(shí)間：2023年07月04日 11:34:18 作者：頭發(fā)掉完就不學(xué)了
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個(gè)即時(shí)的原子CSS引擎,它可以讓你用簡(jiǎn)短的類名來控制元素的樣式,而不需要寫復(fù)雜的CSS代碼,需要的朋友可以參考下
什么是unocss？
unocss是一個(gè)即時(shí)的原子CSS引擎，它可以讓你用簡(jiǎn)短的類名來控制元素的樣式，而不需要寫復(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的插件有語法智能提示，能使我們工作效率大大提高，接下來就是unocss熟練度的問題了。加油，看這篇文章的陌生人。
您可能感興趣的文章:
相關(guān)文章
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中Vue-Baidu-Map基本使用方法實(shí)例
最近有一個(gè)項(xiàng)目需要用到地圖來展示位置并進(jìn)行數(shù)據(jù)交互,用vue-baidu-map實(shí)現(xiàn)出來,下面這篇文章主要給大家介紹了關(guān)于Vue中Vue-Baidu-Map基本使用的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級(jí)問題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架安裝時(shí)遇到的無法安裝問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能
這篇文章主要介紹了vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選
這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3項(xiàng)目如何使用樣式穿透修改elementUI默認(rèn)樣式
這篇文章主要介紹了vue3項(xiàng)目使用樣式穿透修改elementUI默認(rèn)樣式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這一篇主要是創(chuàng)建一個(gè)vue項(xiàng)目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01