快捷導(dǎo)航

Unocss(原子化css)?使用及vue3?+?vite?+?ts講解

更新時(shí)間：2022年11月03日 16:31:55 作者：全村d希望

這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡(jiǎn)單介紹了Unocss使用及圖標(biāo)庫(kù)使用，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

Unocss 簡(jiǎn)單使用

首先初始化一個(gè)vite項(xiàng)目

使用pnpm安裝

pnpm create vite unocss-demo -- --template vue-ts

使用npm 安裝

npm init vite@latest my-vue-app -- --template vue

使用yarn

yarn create vite my-vue-app --template vue

下載Unocss依賴

安裝unocss和三個(gè)預(yù)設(shè)，第一個(gè)是工具類預(yù)設(shè)，第二個(gè)是屬性化模式支持，第三個(gè)是icon支持

pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

在vite.config.ts中引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 引入U(xiǎn)nocss
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({ // 使用Unocss
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    })
  ]
})

最后在main.ts中引入uno.css

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 導(dǎo)入U(xiǎn)nocss
import 'uno.css'
createApp(App).mount('#app')

然后就是使用

<div class="text-25px text-#ff6700 bg-#ccc">你好Unocss</div>

text-25px: font-size:25px
text-#ff6700: color: #ff6700
bg-#ccc: background: #ccc

使用class類名來(lái)描述樣式,省去了單獨(dú)寫(xiě)style的樣式

最后的效果展示

最后附帶樣式查詢地址

https://uno.antfu.me/

例如查詢顏色為red, 使用可以使用 b-red

對(duì)應(yīng)的vscode插件
Unocss

鼠標(biāo)放上去會(huì)有展示

想使用圖標(biāo)

你可進(jìn)入這個(gè)鏈接

https://icones.js.org/

你需要下載這個(gè)圖標(biāo)庫(kù),下載方式就是
包名字后面的logos就是你需要的圖標(biāo)庫(kù)名,圖標(biāo)庫(kù)名可以從對(duì)應(yīng)的地址欄查看

pnpm i -D @iconify-json/logos

圖標(biāo)庫(kù)具體使用

找到你喜歡的圖標(biāo)庫(kù)
例如

選中你需要的圖標(biāo),然后選中Unocss查看對(duì)應(yīng)的class類名
當(dāng)然你也可以使用下面多種方式使用

代碼中使用

<div class="i-logos-atomic-icon w-50px h-50px"></div>

效果

Unocss 也可以增加一些預(yù)設(shè)css配置
在vite.config.ts增加 rules 規(guī)則

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()
      ],
      rules: [ // 在這個(gè)可以增加預(yù)設(shè)規(guī)則, 也可以使用正則表達(dá)式
        [
          'p-c', // 使用時(shí)只需要寫(xiě) p-c 即可應(yīng)用該組樣式
          {
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: `translate(-50%, -50%)`
          }
        ],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
      ]
    })
  ]
})

最后大功告成

gitHub鏈接https://github.com/unocss/unocss#configurations

到此這篇關(guān)于Unocss(原子化css) 使用vue3 + vite + ts的方法的文章就介紹到這了,更多相關(guān)Unocss(原子化css) 使用(vue3 + vite + ts)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: