vue3 + vite + ts + setup , 第二十练 vue3 中使用unocss原子化

什么是css原子化？
CSS原子化的优缺点

1.减少了css体积，提高了css复用

2.减少起名的复杂度

3.增加了记忆成本 将css拆分为原子之后，你势必要记住一些class才能书写，哪怕tailwindcss提供了完善的工具链，你写background，也要记住开头是bg

vue3.x+vite项目中使用，unocss对vite比较友好，最好使用vite

1、安装

npm i -D unocss

2、在vite.config.ts中配置unocss

// 引入unocss
import unoCss from 'unocss/vite'
// 预设
import { presetIcons, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
  plugins: [
    vue(),
    //配置jsx
    vueJsx(),
    // 配置自动导入，dts配置需要重新运行才可以在src中生成auto-import.d.ts文件
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-import.d.ts'
    }),
    // 配置css原子化
    unoCss({
      presets: [presetIcons(), presetAttributify(), presetUno()],
      rules: [
        ['flex', { display: "flex" }],
        ['green', { color: "green" }],
        ['font28', { 'font-size': '40px' }],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
      ],
      // 组合样式 自定义
      shortcuts: {
        fuck: ['green', 'font28']
      }
    })
  ],

})

3、main.ts中引入 uno.css

import 'uno.css'

4、配置静态css

 unoCss({

      rules: [
        ['flex', { display: "flex" }],
        ['green', { color: "green" }],
        ['font28', { 'font-size': '40px' }],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
      ],

    })

5、配置动态css（使用正则表达式） 

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, (match) => ({ padding: `${match[1] / 4}rem` })],
]

6、shortcuts 可以自定义组合样式

 rules: [
        ['flex', { display: "flex" }],
        ['green', { color: "green" }],
        ['font28', { 'font-size': '40px' }],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
      ],
      // 组合样式 自定义
      shortcuts: {
        fuck: ['green', 'font28']
      }

 

7、 unocss 预设

// 预设
import { presetIcons, presetAttributify, presetUno } from 'unocss'

   unoCss({
      presets: [presetIcons(), presetAttributify(), presetUno()]
    })

 （1）presetIcons Icon图标预设 

npm i -D @iconify-json/ic

首先我们去icones官网（方便浏览和使用iconify）浏览我们需要的icon，比如这里我用到了Google Material Icons图标集里面的baseline-add-circle图标，如果需要安装什么 就需要把 /ic修改为要安装的

（2）presetAttributify 属性化模式支持

属性语义化 无须class

 <h2 m="3" flex font28>{{ useTes.testCode }}</h2>

 

（3）presetUno 工具类预设

 

默认的 @unocss/preset-uno 预设（实验阶段）是一系列流行的原子化框架的 通用超集，包括了 Tailwind CSS，Windi CSS，Bootstrap，Tachyons 等。

例如，ml-3（Tailwind），ms-2（Bootstrap），ma4（Tachyons），mt-10px（Windi CSS）均会生效。

项目中使用 tailwindcss 

 <div class="text-green-600">1231231</div>

 vite.config.ts全部配置：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx';
// 引入自动导入插件
import AutoImport from 'unplugin-auto-import/vite'

// 引入unocss
import unoCss from 'unocss/vite'
// 预设
import { presetIcons, presetAttributify, presetUno } from 'unocss'



// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //配置jsx
    vueJsx(),
    // 配置自动导入，dts配置需要重新运行才可以在src中生成auto-import.d.ts文件
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-import.d.ts'
    }),
    // 配置css原子化
    unoCss({
      presets: [presetIcons(), presetAttributify(), presetUno()],
      rules: [
        ['flex', { display: "flex" }],
        ['green', { color: "green" }],
        ['font28', { 'font-size': '40px' }],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
      ],
      // 组合样式 自定义
      shortcuts: {
        fuck: ['green', 'font28']
      }
    })
  ],
  server: {
    host: "0.0.0.0",
    port: 8088,
  },
});