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

Unocss 是一款基于原子化理念的 CSS 工具，可以让你更加轻松便捷地编写样式，同时可以尽可能地减少冗余，使代码更加精简高效。结合 Vue3、Vite 和 TypeScript 的开发环境，可以进一步提高开发效率。下面是关于如何使用 Unocss 的攻略讲解。

安装及配置

首先，我们需要安装 unocss 和 vite-plugin-unocss 两个依赖：

npm i unocss vite-plugin-unocss --save-dev

接着，在 vite.config.ts 文件中添加如下配置项：

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

export default defineConfig({
  plugins: [
    vue(),
    UnocssPlugin({
      include: './src/**/*.{vue,html}',
      theme: presetUno.theme({
        primary: '#ff7f50',
      }),
      preset: [presetUno],
    }),
  ],
});

此外，还需要将 @unocss/preset-uno 添加至依赖项中：

npm i @unocss/preset-uno --save-dev

使用示例

接下来，我们以一个简单的示例来展示如何使用 Unocss，在 Vue3 中编写一个 todo list 应用。我们先定义一个 TodoItem 组件：

<template>
  <div class="py-2 px-4">
    <input type="checkbox" class="mr-2" v-model="checked">
    {{ title }}
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    title: String,
    checked: Boolean,
  },
});
</script>

在上述代码中，我们使用了一些 Unocss 中的原子化类（如 py-2 和 px-4 等），来快速设置样式。接着，我们在 App.vue 中使用 TodoItem：

<template>
  <div>
    <todo-item v-for="(item, index) in todos" :key="index" :title="item.title" :checked="item.checked" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import TodoItem from './components/TodoItem.vue';

export default defineComponent({
  components: {
    TodoItem,
  },
  data() {
    return {
      todos: [
        {
          title: 'Learn Unocss',
          checked: true,
        },
        {
          title: 'Build a todo list app',
          checked: false,
        },
      ],
    };
  },
});
</script>

上述代码中，我们使用了 v-for 指令来遍历 todos 数组，并渲染相应的 TodoItem。通过使用 Unocss，我们能够在不写复杂样式的情况下，快速构建出一个简洁、美观的 todo list 应用。

最后，我们在页面引用我们编译过的样式 即可：

<link rel="stylesheet" href="./unocss.css" />

使用 Unocss 的好处

使用 Unocss 可以带来以下好处：

• 原子化：Unocss 的原子化思想非常适合快速编写样式，而且能够有效避免不必要的冗余代码。
• 效率高：Unocss 可以大幅提高开发效率，同时还能够让代码更加易于维护。
• 上手简单：在 Vue3 + Vite + TypeScript 环境下，使用 Unocss 是非常简单的，只需要按照上述配置步骤完成即可。

这里提供了一个 Unocss 在 Vue3 中的应用示例，开发者可以根据实际需求，结合自己的技术栈，自由发挥，利用 Unocss 这个工具来提升自己的开发效率。