如何在vue中使用unocss以及基本使用方法
更新時間：2023年07月04日 11:34:18 作者：頭發(fā)掉完就不學了
這篇文章主要給大家介紹了關于如何在vue中使用unocss以及基本使用方法的相關資料,unocss是一個即時的原子CSS引擎,它可以讓你用簡短的類名來控制元素的樣式,而不需要寫復雜的CSS代碼,需要的朋友可以參考下
什么是unocss？
unocss是一個即時的原子CSS引擎，它可以讓你用簡短的類名來控制元素的樣式，而不需要寫復雜的CSS代碼。
unocss的優(yōu)點
- 它可以讓你快速地開發(fā)和原型設計，而不需要考慮CSS的細節(jié)。
- 它可以讓你的CSS文件更小，因為它只生成你用到的工具類。
- 它可以讓你的CSS更一致，因為它遵循一套預設的規(guī)則和變量。
- 它可以讓你的CSS更靈活，因為它支持自定義工具類，變體，指令和圖標。
- 它可以讓你的CSS更易于維護，因為它避免了樣式?jīng)_突和重復代碼。
安裝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)建一個`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;
}配置用法
靜態(tài)規(guī)則配置
export default defineConfig({
rules: [
['m-1', { margin: '0.3rem' }]
]
})如上配置之后，在css中檢測到m-1就會編譯成
.m-1 { margin: 0.3rem; }動態(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預設的大小，例如m-1會編譯成
.m-1 { margin: 10px; }快捷方式
在vscode中我們都會有用到快捷鍵一鍵生成代碼，unocss也不例外，假如你有個盒子，里面的內(nèi)容需要垂直居中，那么就可以定義為
export default defineConfig({
shortcuts: [
'flex-center': 'flex items-center justify-center',
]
})動態(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剛上手可能有點不習慣，寫多了再加上unocss的插件有語法智能提示，能使我們工作效率大大提高，接下來就是unocss熟練度的問題了。加油，看這篇文章的陌生人。
您可能感興趣的文章:
相關文章
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關于如何基于Vue3實現(xiàn)掃碼槍掃碼并生成二維碼的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
vue中使用Cesium加載shp文件、wms服務、WMTS服務問題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務、WMTS服務問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
最近有一個項目需要用到地圖來展示位置并進行數(shù)據(jù)交互,用vue-baidu-map實現(xiàn)出來,下面這篇文章主要給大家介紹了關于Vue中Vue-Baidu-Map基本使用的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue項目前端埋點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Vue?Baidu?Map之自定義點圖標bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點圖標bm-marker,文中給大家介紹了vue-baidu-api地圖標記點（自定義標記圖標），設置標記點的優(yōu)先級問題，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-08-08
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,下面這篇文章主要給大家介紹了關于Vue腳手架安裝時遇到的無法安裝問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
vue實現(xiàn)后臺管理權限系統(tǒng)及頂欄三級菜單顯示功能
這篇文章主要介紹了vue實現(xiàn)后臺管理權限系統(tǒng)及頂欄三級菜單顯示功能，本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
使用element組件table表格實現(xiàn)某條件下復選框無法勾選
這篇文章主要介紹了使用element組件table表格實現(xiàn)某條件下復選框無法勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue3項目使用樣式穿透修改elementUI默認樣式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這一篇主要是創(chuàng)建一個vue項目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01