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

倾听冷暖丿

Unocss 简单使用

首先初始化一个vite项目
使用pnpm安装

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

复制代码

使用npm 安装

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

复制代码

使用yarn

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

复制代码

下载Unocss依赖

安装unocss和三个预设，第一个是工具类预设，第二个是属性化模式支持，第三个是icon支持

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

复制代码

在vite.config.ts中引入

1. import { defineConfig } from 'vite'
   
2. import vue from '@vitejs/plugin-vue'
   
3. 
   
4. // 引入Unocss
   
5. import Unocss from 'unocss/vite';
   
6. import { presetUno, presetAttributify, presetIcons } from 'unocss'
   
7. 
   
8. // https://vitejs.dev/config/
   
9. export default defineConfig({
   
10.   plugins: [
    
11.     vue(),
    
12.     Unocss({ // 使用Unocss
    
13.       presets: [
    
14.         presetUno(),
    
15.         presetAttributify(),
    
16.         presetIcons()],
    
17.     })
    
18.   ]
    
19. })

复制代码

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

1. import { createApp } from 'vue'
   
2. import './style.css'
   
3. import App from './App.vue'
   
4. // 导入Unocss
   
5. import 'uno.css'
   
6. createApp(App).mount('#app')

复制代码

然后就是使用

1. <div class="text-25px text-#ff6700 bg-#ccc">你好Unocss</div>
   
2. 
   
3. text-25px: font-size:25px
   
4. text-#ff6700: color: #ff6700
   
5. bg-#ccc: background: #ccc
   
6. 
   
7. 使用class类名来描述样式,省去了单独写style的样式

复制代码

最后的效果展示

最后附带样式查询地址

https://uno.antfu.me/
例如查询颜色为red, 使用可以使用 b-red

对应的vscode插件
Unocss

鼠标放上去会有展示

想使用图标

你可进入这个链接

1. https://icones.js.org/

复制代码

你需要下载这个图标库,下载方式就是
包名字后面的logos就是你需要的图标库名,图标库名可以从对应的地址栏查看

1. pnpm i -D @iconify-json/logos

复制代码

图标库具体使用

找到你喜欢的图标库
例如

选中你需要的图标,然后选中Unocss查看对应的class类名
当然你也可以使用下面多种方式使用

代码中使用

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

复制代码

效果

Unocss 也可以增加一些预设css配置
在vite.config.ts增加 rules 规则

1. import { defineConfig } from 'vite'
   
2. import vue from '@vitejs/plugin-vue'
   
3. import Unocss from 'unocss/vite';
   
4. import { presetUno, presetAttributify, presetIcons } from 'unocss'
   
5. 
   
6. // https://vitejs.dev/config/
   
7. export default defineConfig({
   
8.   plugins: [
   
9.     vue(),
   
10.     Unocss({
    
11.       presets: [
    
12.         presetUno(),
    
13.         presetAttributify(),
    
14.         presetIcons()
    
15.       ],
    
16.       rules: [ // 在这个可以增加预设规则, 也可以使用正则表达式
    
17.         [
    
18.           'p-c', // 使用时只需要写 p-c 即可应用该组样式
    
19.           {
    
20.             position: 'absolute',
    
21.             top: '50%',
    
22.             left: '50%',
    
23.             transform: `translate(-50%, -50%)`
    
24.           }
    
25.         ],
    
26.         [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
    
27.       ]
    
28.     })
    
29.   ]
    
30. })

复制代码

最后大功告成
gitHub链接https://github.com/unocss/unocss#configurations
到此这篇关于Unocss(原子化css) 使用vue3 + vite + ts的方法的文章就介绍到这了,更多相关Unocss(原子化css) 使用(vue3 + vite + ts)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/266660.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！