如何在vue中使用unocss以及基本使用方法
更新時間：2023年07月04日 11:34:18 作者：頭發(fā)掉完就不學(xué)了
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個即時的原子CSS引擎,它可以讓你用簡短的類名來控制元素的樣式,而不需要寫復(fù)雜的CSS代碼,需要的朋友可以參考下
什么是unocss？
unocss是一個即時的原子CSS引擎，它可以讓你用簡短的類名來控制元素的樣式，而不需要寫復(fù)雜的CSS代碼。
unocss的優(yōu)點
- 它可以讓你快速地開發(fā)和原型設(shè)計，而不需要考慮CSS的細節(jié)。
- 它可以讓你的CSS文件更小，因為它只生成你用到的工具類。
- 它可以讓你的CSS更一致，因為它遵循一套預(yù)設(shè)的規(guī)則和變量。
- 它可以讓你的CSS更靈活，因為它支持自定義工具類，變體，指令和圖標(biāo)。
- 它可以讓你的CSS更易于維護，因為它避免了樣式?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)建一個`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支持用預(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中檢測到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預(yù)設(shè)的大小，例如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剛上手可能有點不習(xí)慣，寫多了再加上unocss的插件有語法智能提示，能使我們工作效率大大提高，接下來就是unocss熟練度的問題了。加油，看這篇文章的陌生人。
您可能感興趣的文章:
相關(guān)文章
跨域是指當(dāng)一個資源去訪問另一個不同域名或者同域名不同端口的資源時,就會發(fā)出跨域請求,下面這篇文章主要給大家介紹了關(guān)于vue使用vite配置跨域以及環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
element-plus報錯ResizeObserver?loop?limit?exceeded解決辦法
這篇文章主要給大家介紹了關(guān)于element-plus報錯ResizeObserver?loop?limit?exceeded的解決辦法,文中通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue路由跳轉(zhuǎn)后刷新指定頁面的方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了VUE記賬憑證模塊組件的實例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03
ElementUI下拉組件el-select一次從后端獲取選項并設(shè)置默認值方式
這篇文章主要介紹了ElementUI下拉組件el-select一次從后端獲取選項并設(shè)置默認值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了vue雙向綁定的簡單實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
使用vue與jquery實時監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實時監(jiān)聽用戶輸入狀態(tài)，實現(xiàn)效果是input未輸入值時，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧2017-09-09
在Vue項目開發(fā)中,.env文件用于配置不同環(huán)境（開發(fā)、測試、生產(chǎn)）的環(huán)境變量,通過不同的文件如.env.development和.env.production來區(qū)分環(huán)境配置,Vue會根據(jù)運行命令自動加載對應(yīng)的配置文件,如使用npm run serve會加載.env.development2024-11-11
這篇文章主要介紹了使用vue-antd動態(tài)切換主題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10